docsearch/docs-src/dropdown-configuration.md

layout	title
two-columns	Configuring the search results

DocSearch is a wrapper around the autocomplete.js library that gets its results from the Algolia API. As such, you can use any options provided by this project and by the Algolia API.

Autocomplete options

You can pass any options to the underlying autocomplete instance through the autocompleteOptions parameter. You will find all autocomplete options in its own documentation.

You can also listen to autocomplete events through the .autocomplete property of the docsearch instance.

var search = docsearch({
  apiKey: '<API_KEY>',
  indexName: '<INDEX_NAME>',
  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
  debug: true,
  autocompleteOptions: {
    // See https://github.com/algolia/autocomplete.js#options
    // For full list of options
  }
});

// See https://github.com/algolia/autocomplete.js#custom-events
// For full list of events
search.autocomplete.on('autocomplete:opened', function(e) {
  // Do something when the dropdown menu is opened
});

Docsearch Options

handleSelected

We already bind the autocomplete:selected event inside the docsearch. If you want to replace the default behavior you can pass the handleSelected option.

var search = docsearch({
  apiKey: '<API_KEY>',
  indexName: '<INDEX_NAME>',
  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
  handleSelected: function (input, event, suggestion) {
  }
});

queryHook

If you want modify the query before it is sent to Algolia you can pass the queryHook option.

var search = docsearch({
  apiKey: '<API_KEY>',
  indexName: '<INDEX_NAME>',
  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
  queryHook: function (query) {
      return query + "_modified";
  }
});

transformData

If you want to modify the hits before displaying them you can make use of the transformData option

var search = docsearch({
  apiKey: '<API_KEY>',
  indexName: '<INDEX_NAME>',
  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
  transformData: function (hits) {
    // modify hits
    return hits;
  }
});

Algolia options

You can also pass any specific option to the Algolia API to change the way records are returned. You can pass any options to the Algolia API through the algoliaOptions parameter.

docsearch({
  appId: '<APP_ID>', // if you are running the crawler yourself
  apiKey: '<API_KEY>',
  indexName: '<INDEX_NAME>',
  inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
  algoliaOptions: {
    hitsPerPage: 10
  }
});

You will find all Algolia API options in its own documentation.