Examples · Data & cache

Active search

A URL that is a function of the query: debounce, abort, keepPrevious.

The htmx “active search” pattern with signals. The resource URL is a function of the query signal; an empty query means no request, a new query aborts the previous one, and keepPrevious keeps the last list visible while the next loads.

Playground

What to notice

  • @input.debounce.300 is an event modifier: no timer code.
  • Type fast and watch the Server requests panel: aborted requests never resolve into the UI.
  • The empty branch of when() distinguishes “no matches” from “nothing typed yet”.

Type “lo”, then “lon”, then “xyz”.