c85ff1fc6f
* integrate previous work enhance tyle/content reformat part 1 wait for review * adance start_urls * enhance attributes description * fix typo * proofread documentation/docsearch * add apiKey mention intefrate review and small fixes finished proofreading update sclient-rendering use unseen review
104 lines
2.8 KiB
Text
104 lines
2.8 KiB
Text
---
|
|
title: Configuring the search results
|
|
---
|
|
|
|
DocSearch is a wrapper around the [autocomplete.js](https://github.com/algolia/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](https://www.algolia.com/doc/api-reference/).
|
|
|
|
## 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](https://github.com/algolia/autocomplete.js#options).
|
|
|
|
You can also listen to `autocomplete` events through the `.autocomplete`
|
|
property of the `docsearch` instance.
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```javascript
|
|
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](https://www.algolia.com/doc/api-reference/api-parameters/).
|