docsearch/docs/src/dropdown.md

layout	title
two-columns	Dropdown Search-UI

Once your Algolia DocSearch index is ready, correctly set up, and filled with the right data, you will need to integrate our dedicated Search-UI. To add the dropdown of results below your search input, you'll have to include our DocSearch library into your website as per the following example. Your apiKey and indexName credentials will be given to you as soon as we've created your config.

<!-- Before the closing </head> -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/docsearch.js@{{docSearchJSVersion}}/dist/cdn/docsearch.min.css"
/>

<!-- Before the closing </body> -->
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@{{docSearchJSVersion}}/dist/cdn/docsearch.min.js"></script>
<script>
  docsearch({
    // Your apiKey and indexName will be given to you once
    // we create your config
    apiKey: '<API_KEY>',
    indexName: '<INDEX_NAME>',
    //appId: '<APP_ID>', // Should be only included if you are running DocSearch on your own.
    // Replace inputSelector with a CSS selector
    // matching your search input
    inputSelector: '<YOUR_CSS_SELECTOR>',
    // Set debug to true if you want to inspect the dropdown
    debug: false,
  });
</script>

Testing

If you're eager to test DocSearch but don't have any credentials of your own yet, you can try out the one we use on this website:

docsearch({
  apiKey: '25626fae796133dc1e734c6bcaaeac3c',
  indexName: 'docsearch',
});