How would you implement active search with htmx?

Summary

A search input with hx-get to the search endpoint, hx-trigger="input changed delay:300ms, search", hx-target on the results container (for example the tbody), hx-sync="this:replace", an indicator, and hx-replace-url to keep the query in the URL. The server returns only the matching rows (or an empty-state row).

Longer Answer

On the server it's a parameterised query with a LIMIT. The same URL should return the full page for normal visits (check HX-Request) so the search URL can be bookmarked. aria-live on the results helps screen-reader users.

Key Points

• Debounced trigger + changed.
• Swap only the results.
• hx-sync replace to avoid stale results.
• hx-replace-url and full-page fallback.

Deep dive: htmx Tutorial: Active Search