Debounce Input Requests with htmx’s hx-trigger delay and changed Modifiers

Problem: Too many requests while typing

When a search box fires a request on every keyup, fast typing can generate dozens of calls in a second. Most of those requests are wasted because the user hasn’t finished the term, and if the server is slow the UI can feel laggy or show stale results.

How hx‑trigger with delay and changed works

The hx-trigger attribute lets you combine DOM events with modifiers. Adding changed means the trigger only fires when the element’s value actually differs from the previous value, preventing duplicate submissions for repeated keys. The delay: modifier starts a timer each time the event occurs; if another event arrives before the timer expires, the timer resets. The request is sent only after the value has stayed unchanged for the specified interval, giving a simple debounce.

Worked example: live search

<input type="text" name="q" placeholder="Search…"
       hx-get="/search"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#results"
       hx-indicator="#indicator">
<div id="indicator" class="htmx-indicator">Loading…</div>
<div id="results"></div>

As the user types, the network tab shows a request no sooner than 300 ms after the last keystroke, and typing the same character twice produces only one request. The indicator appears while the request is in flight, giving feedback without blocking the UI.

Trade‑offs and limitations

• If the endpoint is slow or returns large payloads, the user may still perceive lag; pairing the trigger with hx-indicator and optionally disabling the input (disabled during the request) can improve perceived performance.
• The delay modifier works reliably with standard DOM events like keyup, keydown, or input. For custom events you must verify that the event bubbles and is cancellable, or consider an extension for more complex debouncing logic.
• Because htmx aborts the previous XMLHttpRequest/fetch when a new trigger occurs, only the most recent request reaches the server, which avoids race conditions but also means any in‑flight work is discarded.

Actionable closing

1. Add the hx-trigger line shown above to any input that drives an Ajax call.
2. Open the browser’s Network tool, type a few words, and confirm requests appear only after the delay and that repeated characters do not duplicate calls.
3. Experiment with the delay value (e.g., 100 ms for a more responsive feel or 600 ms to save bandwidth) and observe the spacing change in the Network tab.
4. If you notice sluggishness, add hx-indicator and consider temporarily disabling the input while the request is pending.