Drive your theme's search UI
If your theme already has a search dialog you'd rather keep, chops-search can drive it instead of building its own. This is inline mode, and it activates automatically when the page already contains the expected element ids.
The markup contract
| Element | Requirement |
|---|---|
id="chops-input" | The query input |
id="chops-results" | Must be a <ul>; the script appends <li> elements |
id="chops-mode" | A <span> for the status line ("keyword-only", result counts) |
When chops-search.js finds #chops-input on load, it skips mounting the
overlay and drives this markup instead.
What becomes your responsibility
Three things were your theme's script's job, and chops-search does not touch DOM it did not create:
- Showing and hiding. chops-search has no opinion about a container it didn't build. Your open/close logic stays yours.
- Clearing. Add
data-chops-clearto a button and it will be wired up; the script fills an empty one with a clear icon. If you clear the input programmatically, note that setting.valuefires nothing; dispatch the event yourself:input.value = ""; input.dispatchEvent(new Event("input")); - Stacking context. If the modal markup sits inside a container with
transform,filter, or its ownz-index, noz-indexon the modal can lift it above the page. The self-mounted overlay avoids this by being a direct child of<body>; your theme's markup may not.