Search as you type

A search-as-you-type box sends a request on every keystroke and shows whatever comes back. Type “rea”, then “react”, and two requests are waiting for a reply. If the one for “rea” is slower, it arrives last and replaces the results: the box says “react”, the list shows results for “rea”.

src/search.ts

export function createSearch(fetchResults: (query: string) => Promise<string[]>) {
  const state = { query: '', results: [] as string[] };

  async function onInput(query: string): Promise<void> {
    state.query = query;
    const results = await fetchResults(query);
    state.results = results;
  }

  return { state, onInput };
}

See how Quint finds and fixes it.