Mica / combobox example

Search for a place. Choose an exact location.

The same text field, with suggestions supplied by an app’s search service.

Weather location

Choose where to show your forecast.

City or place

Illustrative local results with a simulated delay. No location service is contacted.

What the app knows

No location chosen yet.

selection: null

Typing is not selecting. Writing “Paris” changes the query. Choosing a row identifies one particular Paris.

The name is not the ID. Both cities display “Paris,” but their keys identify different locations. The app uses that key to look up coordinates.

The service decides what matches. Try “NYC.” A service can return “New York,” even though that label does not contain “NYC.” Mica’s current substring filter would hide it.

Existing Mica controls

API

The app fetches results and supplies keys, labels, and status text.

<m-combobox filter="manual">
  <input list="locations" aria-label="Location">
  <datalist id="locations">
    <option value="Paris" data-key="paris-fr" label="Île-de-France, France"></option>
    <option value="Paris" data-key="paris-tx" label="Texas, United States"></option>
  </datalist>
  <p role="status">Searching…</p>
</m-combobox>

// Choosing a result; typing still uses the input event.
combobox.addEventListener('m-on-change', ({ detail }) => {
  const location = resultsByKey.get(detail.key);
  // The application owns coordinates, fetching, and saving.
});