{{value}}
`.\n\n* `debounce` – If set, will postpone the source execution until after `debounce` milliseconds\nhave elapsed since the last time it was invoked.\n\n* `cache` - If set to `false`, subsequent identical queries will always execute the source function for suggestions. Defaults to `true`.\n\n## Sources\n\nA few helpers are provided by default to ease the creation of Algolia-based sources.\n\n### Hits\n\nTo build a source based on Algolia's `hits` array, just use:\n\n```js\n{\n source: autocomplete.sources.hits(indexObj, { hitsPerPage: 2 }),\n templates: {\n suggestion: function(suggestion, answer) {\n // FIXME\n }\n }\n}\n```\n\n### PopularIn (aka \"xxxxx in yyyyy\")\n\nTo build an Amazon-like autocomplete menu, suggesting popular queries and for the most popular one displaying the associated categories, you can use the `popularIn` source:\n\n```js\n{\n source: autocomplete.sources.popularIn(popularQueriesIndexObj, { hitsPerPage: 3 }, {\n source: 'sourceAttribute', // attribute of the `popularQueries` index use to query the `index` index\n index: productsIndexObj, // targeted index\n facets: 'facetedCategoryAttribute', // facet used to enrich the most popular query\n maxValuesPerFacet: 3 // maximum number of facets returned\n }, {\n includeAll: true, // should it include an extra \"All department\" suggestion\n allTitle: 'All departments' // the included category label\n }),\n templates: {\n suggestion: function(suggestion, answer) {\n var value = suggestion.sourceAttribute;\n if (suggestion.facet) {\n // this is the first suggestion\n // and it has been enriched with the matching facet\n value += ' in ' + suggestion.facet.value + ' (' + suggestion.facet.count + ')';\n }\n return value;\n }\n }\n}\n```\n\n### Custom source\n\nThe `source` options can also take a function. It enables you to have more control of the results returned by Algolia search. The function `function(query, callback)` takes 2 parameters\n * `query: String`: the text typed in the autocomplete\n * `callback: Function`: the callback to call at the end of your processing with the array of suggestions\n\n```js\nsource: function(query, callback) {\n var index = client.initIndex('myindex');\n index.search(query, { hitsPerPage: 1, facetFilters: 'category:mycat' }).then(function(answer) {\n callback(answer.hits);\n }, function() {\n callback([]);\n });\n}\n```\n\nOr by reusing an existing source:\n\n```js\nvar hitsSource = autocomplete.sources.hits(index, { hitsPerPage: 5 });\n\nsource: function(query, callback) {\n hitsSource(query, function(suggestions) {\n // FIXME: Do stuff with the array of returned suggestions\n callback(suggestions);\n });\n}\n```\n\n## Security\n\n### User-generated data: protecting against XSS\n\nMalicious users may attempt to engineer XSS attacks by storing HTML/JS in their data. It is important that user-generated data be properly escaped before using it in an *autocomplete.js* template.\n\nIn order to easily do that, *autocomplete.js* provides you with a helper function escaping all HTML code but the highlighting tags:\n\n```js\n templates: {\n suggestion: function(suggestion) {\n var val = suggestion._highlightResult.name.value;\n return autocomplete.escapeHighlightedString(val);\n }\n }\n```\n\nIf you did specify custom highlighting pre/post tags, you can specify them as 2nd and 3rd parameter:\n\n```js\n templates: {\n suggestion: function(suggestion) {\n var val = suggestion._highlightResult.name.value;\n return autocomplete.escapeHighlightedString(val, '', '');\n }\n }\n```\n\n## FAQ\n\n### How can I `Control`-click on results and have them open in a new tab?\n\nYou'll need to update your suggestion templates to make them as `` links\nand not simple divs. `Control`-clicking on them will trigger the default browser\nbehavior and open suggestions in a new tab.\n\nTo also support keyboard navigation, you'll need to listen to the\n`autocomplete:selected` event and change `window.location` to the destination\nURL.\n\nNote that you might need to check the value of `context.selectionMethod` in\n`autocomplete:selected` first. If it's equal to `click`, you should `return`\nearly, otherwise your main window will **also** follow the link.\n\nHere is an example of how it would look like:\n\n```javascript\nautocomplete(…).on('autocomplete:selected', function(event, suggestion, dataset, context) {\n // Do nothing on click, as the browser will already do it\n if (context.selectionMethod === 'click') {\n return;\n }\n // Change the page, for example, on other events\n window.location.assign(suggestion.url);\n});\n```\n\n## Events\n\nThe autocomplete component triggers the following custom events.\n\n* `autocomplete:opened` – Triggered when the dropdown menu of the autocomplete is\n opened.\n\n* `autocomplete:shown` – Triggered when the dropdown menu of the autocomplete is\n shown (opened and non-empty).\n\n* `autocomplete:empty` – Triggered when all datasets are empty.\n\n* `autocomplete:closed` – Triggered when the dropdown menu of the autocomplete is\n closed.\n\n* `autocomplete:updated` – Triggered when a dataset is rendered.\n\n* `autocomplete:cursorchanged` – Triggered when the dropdown menu cursor is moved\n to a different suggestion. The event handler will be invoked with 3\n arguments: the jQuery event object, the suggestion object, and the name of\n the dataset the suggestion belongs to.\n\n* `autocomplete:selected` – Triggered when a suggestion from the dropdown menu is\n selected. The event handler will be invoked with the following arguments: the jQuery\n event object, the suggestion object, the name of the dataset the\n suggestion belongs to and a `context` object. The `context` contains\n a `.selectionMethod` key that can be either `click`, `enterKey`, `tabKey` or\n `blur`, depending how the suggestion was selected.\n\n* `autocomplete:cursorremoved` – Triggered when the cursor leaves the selections\n or its current index is lower than 0\n\n* `autocomplete:autocompleted` – Triggered when the query is autocompleted.\n Autocompleted means the query was changed to the hint. The event handler will\n be invoked with 3 arguments: the jQuery event object, the suggestion object,\n and the name of the dataset the suggestion belongs to.\n\n* `autocomplete:redrawn` – Triggered when `appendTo` is used and the wrapper is resized/repositionned.\n\nAll custom events are triggered on the element initialized as the autocomplete.\n\n## API\n\n### jQuery\n\nTurns any `input[type=\"text\"]` element into an auto-completion menu. `globalOptions` is an\noptions hash that's used to configure the autocomplete to your liking. Refer to\n[Global Options](#global-options) for more info regarding the available configs. Subsequent\narguments (`*datasets`), are individual option hashes for datasets. For more\ndetails regarding datasets, refer to [Datasets](#datasets).\n\n```\n$(selector).autocomplete(globalOptions, datasets)\n```\n\nExample:\n\n```js\n$('.search-input').autocomplete({\n minLength: 3\n},\n{\n name: 'my-dataset',\n source: mySource\n});\n```\n\n#### jQuery#autocomplete('destroy')\n\nRemoves the autocomplete functionality and reverts the `input` element back to its\noriginal state.\n\n```js\n$('.search-input').autocomplete('destroy');\n```\n\n#### jQuery#autocomplete('open')\n\nOpens the dropdown menu of the autocomplete. Note that being open does not mean that\nthe menu is visible. The menu is only visible when it is open and has content.\n\n```js\n$('.search-input').autocomplete('open');\n```\n\n#### jQuery#autocomplete('close')\n\nCloses the dropdown menu of the autocomplete.\n\n```js\n$('.search-input').autocomplete('close');\n```\n\n#### jQuery#autocomplete('val')\n\nReturns the current value of the autocomplete. The value is the text the user has\nentered into the `input` element.\n\n```js\nvar myVal = $('.search-input').autocomplete('val');\n```\n\n#### jQuery#autocomplete('val', val)\n\nSets the value of the autocomplete. This should be used in place of `jQuery#val`.\n\n```js\n$('.search-input').autocomplete('val', myVal);\n```\n\n#### jQuery.fn.autocomplete.noConflict()\n\nReturns a reference to the autocomplete plugin and reverts `jQuery.fn.autocomplete`\nto its previous value. Can be used to avoid naming collisions.\n\n```js\nvar autocomplete = jQuery.fn.autocomplete.noConflict();\njQuery.fn._autocomplete = autocomplete;\n```\n\n### Standalone\n\nThe standalone version API is similiar to jQuery's:\n\n```js\nvar search = autocomplete(containerSelector, globalOptions, datasets);\n```\n\nExample:\n\n```js\nvar search = autocomplete('#search', { hint: false }, [{\n source: autocomplete.sources.hits(index, { hitsPerPage: 5 })\n}]);\n\nsearch.autocomplete.open();\nsearch.autocomplete.close();\nsearch.autocomplete.getVal();\nsearch.autocomplete.setVal('Hey Jude');\nsearch.autocomplete.destroy();\nsearch.autocomplete.getWrapper(); // since autocomplete.js wraps your input into another div, you can access that div\n```\n\nYou can also pass a custom Typeahead instance in Autocomplete.js constructor:\n\n```js\nvar search = autocomplete('#search', { hint: false }, [{ ... }], new Typeahead({ ... }));\n```\n\n#### autocomplete.noConflict()\n\nReturns a reference to the autocomplete plugin and reverts `window.autocomplete`\nto its previous value. Can be used to avoid naming collisions.\n\n```js\nvar algoliaAutocomplete = autocomplete.noConflict();\n```\n\n## Contributing & releasing\n\nsee [CONTRIBUTING.md](./CONTRIBUTING.md)\n\n## Credits\n\nThis library has originally been forked from [Twitter's typeahead.js](https://github.com/twitter/typeahead.js) library.\n","_attachments":{},"homepage":"https://github.com/algolia/autocomplete.js","bugs":{"url":"https://github.com/algolia/autocomplete.js/issues"},"license":"MIT"}