Add data attributes to register an element with typeahead.
<input type="text" data-provide="typeahead" data-items="10">
Call the typeahead manually with:
query('.typeahead').typeahead()Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".
| Name | type | default | description |
|---|---|---|---|
| source | array, function | [ ] | The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument. |
| items | number | 8 | The max number of items to display in the dropdown. |
| minLength | number | 1 | The minimum character length needed before triggering autocomplete suggestions |
| matcher | function | case insensitive | The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match. |
| sorter | function | exact match, case sensitive, case insensitive | Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query. |
| highlighter | function | highlights all default matches | Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html. |
To use the Typeahead methods, you must get an instance of the Typeahead class which is stored in the element's data store.
var typeahead = query("#aNode").data("typeahead");| Method | Description |
|---|---|
| hide | Hides the typeahead list. |
| show | Shows the typeahead list. |
| process | Shows the typeahead list. |
A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
<input type="text" data-provide="typeahead">
This example uses ajax to feed the source for typeahead
<input id="zipcode" type="text" data-provide="typeahead" data-items="10">
query('#zipcode').typeahead({
minLength: 3,
source: function (query, process) {
return request('/zipcodes/'+query, {handleAs:'json'})
.then(function (data) {
process(data);
});
}
});