Active search
Search the list of htmx attributes. Every keystroke (after a short pause) asks the server, and the server answers with table rows.
Searching…
hx-get | Issue a GET request to the given URL |
hx-post | Issue a POST request to the given URL |
hx-put | Issue a PUT request to the given URL |
hx-patch | Issue a PATCH request to the given URL |
hx-delete | Issue a DELETE request to the given URL |
hx-trigger | Which event fires the request, with modifiers like delay and changed |
hx-target | Which element receives the response |
hx-swap | How the response is swapped in: innerHTML, outerHTML, beforeend... |
hx-swap-oob | Swap this element into the page by id, out of band |
hx-select | Pick a part of the response to swap |
hx-select-oob | Pick parts of the response to swap out of band |
hx-vals | Add extra values to the request |
hx-include | Include values from other elements in the request |
hx-indicator | Element that gets the htmx-request class while loading |
hx-confirm | Ask for confirmation before the request |
hx-prompt | Ask for a value before the request |
hx-boost | Turn links and forms into AJAX requests |
hx-push-url | Push a URL into browser history |
hx-replace-url | Replace the current URL in browser history |
hx-sync | Coordinate requests between elements |
hx-disable | Disable elements while a request is in flight |
hx-preserve | Keep an element as is across swaps |
hx-headers | Add headers to the request |
hx-on:* | Run inline JavaScript on any event |
hx-config | Per-element configuration |
hx-status:* | Override the swap for a given response status |
hx-partial | A tag that wraps content and says where it goes. New in htmx 4 |
hx-ignore | Tell htmx to leave this subtree alone |
hx-preload | Preload a request before the user triggers it |
hx-history-elt | Element to snapshot for history |
What to look at
hx-trigger="input changed delay:300ms" is the whole debounce. No timer code. htmx waits 300ms after the last keystroke and only sends the request if the value changed.
hx-indicator points at the "Searching…" text. htmx adds the htmx-request class to it while a request is in flight. A CSS rule does the rest.
The Clear button is Alpine and htmx on the same element. Alpine shows it only when there is text (x-show="q") and empties the input. htmx fetches the full list again.
The same Astro component renders the results on first load and in the API response. One template, used twice.