Step 1: Fetch a New SearchHeadless Instance

The autocomplete dropdown in the <SearchBar /> is powered by the Autocomplete API which returns query suggestions, but not entities. Therefore, a Universal Search Query also needs to be be made to fetch entities and their photos.

You need to use a different SearchHeadless instance to run and store these search results. This is because you don’t want to re-render your UniversalResults component by replacing the universal state in your main instance.

The provideSearchHeadless hook supplies a new SearchHeadless instance for visual autocomplete queries. You need to provide a headlessId in order to distinguish this new instance from the main instance.

Note

Add Redux DevTools to your browser to see both SearchHeadless states while developing locally.

// src/App.tsx

import { provideHeadless } from "@yext/search-headless-react";
import { SearchBar, UniversalResults } from "@yext/search-ui-react";

const App = (): JSX.Element => {
  const entityPreviewSearcher = provideHeadless({
    apiKey: "Search API Key",
    experienceKey: "Search experience Key",
    locale: "en",
    headlessId: "entity-preview-searcher",
  });

  return (
    <div className="flex justify-center px-4 py-6">
      <div className="w-full max-w-5xl">
        <SearchBar />
        <UniversalResults
          verticalConfigMap={{
            faqs: {},
            locations: {},
            products: {},
          }}
        />
      </div>
    </div>
  );
};

export default App;

<% elem.innerText %>