← Back to Examples

Live Search

Search-as-you-type with debounced input

Interactive Search Demo

This example shows how html★ can turn a simple input field into a live search interface. As you type, requests are automatically debounced and results stream in.

Try searching for: alice, bob, carol, david, emma, frank

html★ Features Used

  • data-trigger="input" — Fires on every keystroke (automatically debounced 300ms)
  • data-include="self" — Includes the input's value in the request
  • data-href="/api/search" — The endpoint to query
  • data-target="#results" — Where to inject the search results

How It Works

The search input uses the input trigger to send requests as the user types. html★ automatically debounces these requests to avoid overwhelming the server.

Key Concepts

  • Debouncing — Requests wait 300ms after the last keystroke before firing
  • Loading State — The [data-loading] attribute enables CSS loading indicators
  • Accessibility — Use aria-live="polite" on results for screen readers
  • No JavaScript Required — Just HTML attributes configure the behavior