Triggers, forms, and feedback

Use trigger modifiers

Debounce input, suppress duplicate values, limit frequency, filter events, or allow a trigger only once.

8 minute lesson

~~~

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.

Lesson completed