Ajax Select

Remote-data select with async search, debounced input, and loading state.

Single Select — Default

Type to search. Results are debounced at 320ms and cached per query so retyping a previous search skips the simulated network delay.

Country

<div class="sc-asel" x-data="ajaxSelect({ dataset: countries, delay: 320 })">
  <input type="text" x-model="query" @input="onInput()" />
  <ul x-show="open">
    <template x-for="item in visibleResults" :key="item.id">
      <li @click="select(item)" x-text="item.label"></li>
    </template>
  </ul>
</div>

Multi-Select — Chips

Selecting a result adds a removable chip instead of closing the list, so multiple items can be picked in one session.

Customers

States

Forced demonstrations of the empty-result and error states.

Empty Result

Error

Couldn't load results. Try again.

Disabled

This page simulates network latency with setTimeout so the loading and debounce behavior is visible without a backend. Swap js/ui/components/form.js's _search() body for a real fetch() call when wiring this into a project — the rest of the component (debounce, cache, keyboard nav, states) needs no changes.

Single Select — Default

Multi-Select — Chips

States

Other Components in Forms