Build a Query Suggestions UI

EXPERIMENTAL_autocomplete({
  container: "#autocomplete",
  placeholder: "Search for products",
  showRecent: true,
  showQuerySuggestions: {
    indexName: "instant_search_demo_query_suggestions",
    getURL: (item) => `/search?q=${item.query}`,
  },
  indices: [
    {
      indexName: "instant_search",
      // ...
    },
  ],
});

// ...

const searchClient = algoliasearch("ALGOLIA_APPLICATION_ID", "ALGOLIA_SEARCH_API_KEY");

const search = instantsearch({
  indexName: "instant_search",
  searchClient,
});

search.addWidgets([
  EXPERIMENTAL_autocomplete({
    container: '#autocomplete',
    showQuerySuggestions: {
      indexName: 'instant_search_demo_query_suggestions',
    },
  }),
  hits({
    container: "#hits",
    templates: {
      // ...
    },
  }),
]);

search.start();

EXPERIMENTAL_autocomplete({
  container: "#autocomplete",
  showRecent: {
    templates: {
      item: ({ item, onSelect }, { html }) =>
        html`<div onClick=${onSelect}>${item.query}</div>`,
    },
  },
  // ...
});

EXPERIMENTAL_autocomplete({
  container: "#autocomplete",
  showQuerySuggestions: {
    indexName: "instant_search_demo_query_suggestions",
    searchParameters: { hitsPerPage: 5 },
    templates: {
      item: ({ item, onSelect }, { html, components }) =>
        html`<div onClick=${onSelect}>
          ${components.ReverseHighlight({ hit: item, attribute: "query" })}
        </div>`,
    },
  },
  // ...
});