Search-as-You-Type Autocomplete for React

import { SearchProvider, Autocomplete } from '@searchjet/react';

function App() {
  return (
    <SearchProvider
      indexName="docs"
      searchApiKey="your_search_api_key"
    >
      {/* Search-as-you-type: debounced, keyboard + a11y ready */}
      <Autocomplete
        placeholder="Search docs, products…"
        maxSuggestions={6}
        debounceMs={150}
        onSelect={(hit) => {
          window.location.href = hit.url ?? `/product/${hit.id}`;
        }}
      />
    </SearchProvider>
  );
}

import { useState, useEffect, useCallback } from 'react';

/** Headless autocomplete — full control, zero assumptions */
function useSearchJet(value) {
  const [suggestions, setSuggestions] = useState([]);
  const [status, setStatus] = useState('idle');

  useEffect(() => {
    let cancelled = false;               // race-condition guard
    if (!value.trim()) {
      setSuggestions([]);
      setStatus('idle');
      return;
    }

    const timer = setTimeout(async () => {
      setStatus('loading');
      const res = await fetch(`/api/search?q=${encodeURIComponent(value)}`);
      const data = await res.json();
      if (!cancelled) {
        setSuggestions(data.results);
        setStatus('success');
      }
    }, 200);                             // debounce

    return () => {
      cancelled = true;                  // drop stale responses
      clearTimeout(timer);
    };
  }, [value]);

  return { suggestions, status };
}

export function AutocompleteHeadless() {
  const [query, setQuery] = useState('');
  const [active, setActive] = useState(-1);
  const { suggestions } = useSearchJet(query);

  const onKeyDown = (e) => {
    if (e.key === 'ArrowDown') setActive((a) => (a + 1) % suggestions.length);
    if (e.key === 'ArrowUp') setActive((a) => (a <= 0 ? suggestions.length - 1 : a - 1));
    if (e.key === 'Enter' && active > -1) {
      const hit = suggestions[active];
      window.location.href = hit.url;
    }
  };

  return (
    <input
      onChange={(e) => { setQuery(e.target.value); setActive(-1); }}
      onKeyDown={onKeyDown}
      role="combobox"
      aria-expanded={suggestions.length > 0}
      placeholder="Type to search…"
    />
  );
}