Using htmx’s hx-get for Live Search Without Writing JavaScript

The problem: adding live search without a JavaScript bundle

You want a search box that shows results as the user types, but you’d rather avoid writing custom Ajax code or pulling in a large framework. The page already serves HTML fragments from the backend, so you need a way to trigger a GET request, swap the response into the DOM, and keep the markup declarative.

How hx-get fits the need

The hx-get attribute tells htmx to issue an HTTP GET request to the URL given in its value when the element’s trigger event fires. By default the request runs on the element’s natural event (e.g., click for a button, keyup for an input). You control where the response goes with hx-target (a CSS selector) and how it is inserted with hx-swap (default innerHTML). No JavaScript is required beyond loading the htmx library itself.

Worked example: live search box

Assume a backend endpoint /api/search?q= that returns an HTML snippet of matching items.

<!-- Load htmx from a CDN (or self‑hosted) -->
<script src="https://unpkg.com/htmx.org@1.9.12"></script>

<label for="search">Search:</label>
<input id="search" type="text" name="q"
       hx-get="/api/search"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#results"
       hx-swap="innerHTML">

<div id="results"></div>

Explanation:

• hx-get="/api/search" – the GET request is sent to that URL.
• hx-trigger="keyup changed delay:300ms" – wait for a keyup, but only if the value actually changed, and debounce for 300 ms to reduce traffic.
• hx-target="#results" – place the response inside the element with ID results.
• hx-swap="innerHTML" – default behavior; the returned HTML replaces the current contents of results.

When the user types, htmx builds a URL like /api/search?q=term, issues a GET, and inserts the returned HTML into #results. No extra JavaScript is needed to handle the request or update the DOM.

Trade‑offs and limitations

Because htmx expects HTML responses, returning JSON would require a custom swap strategy or a client‑side transformer, adding complexity. Also, if you remove the debounce (delay:) and bind to every keystroke, a fast typist could generate many requests, potentially overwhelming the server or exceeding rate limits. The delay: modifier mitigates this, but you should still monitor traffic and consider server‑side caching or aborting stale requests if latency becomes an issue.

Actionable closing

To try this yourself:

1. Save the markup above to a file search.html.
2. Serve it with any static server (e.g., python -m http.server 8000).
3. Ensure your backend endpoint /api/search returns HTML fragments for the query parameter q.
4. Open the page in a browser, open the developer tools Network tab, and type in the box. You should see GET requests to /api/search?q=… and the #results div update with the returned HTML.

If the requests appear as expected and the DOM updates without errors, the hx-get feature is working as described. Adjust the debounce time or swap strategy to suit your application’s performance needs.