Use trigger modifiers

An active search can use:

<input type="search" name="q"
  hx-get="/search"
  hx-trigger="keyup changed delay:500ms, search"
  hx-target="#results"
  hx-sync="this:replace">

changed suppresses requests when the value is identical. delay:500ms is a debounce: each new keyup resets the timer. The search event also handles clearing the native search field.

Debouncing does not cancel a request already in flight. hx-sync="this:replace" aborts the older search when a newer one starts, preventing a slow old response from overwriting fresh results.

Other modifiers solve different problems:

• throttle:500ms allows at most one request per interval
• once accepts only the first matching event
• from:body listens on another element
• target:<selector> filters events by their original target
• queue:first, queue:last, or queue:all controls events arriving during a request

Use the smallest set that expresses a real timing requirement. With Network throttling enabled, type quickly and confirm the final results always match the current input.