Basic example via data attributes: (type 'item...')
<input type="text"data-provide="typeahead"data-source='["item 1","item 2","item 3"]'placeholder="item..."class="form-control" />
Load collection from json file (type 'Arg...')
$.get('js/api/typehead_collection.json', function(data){ $(".typeahead_2").typeahead({ source:data.countries });},'json');
Basic example via javascript (type 'item...')
$('.typeahead_1').typeahead({ source: ["item 1","item 2","item 3"]});
Load json object - required 'name' attribute (type 'Afg...')
$('.typeahead_3').typeahead({ source: [ {"name": "Afghanistan", "code": "AF", "ccn0": "040"}, {"name": "Land Islands", "code": "AX", "ccn0": "050"}, {"name": "Albania", "code": "AL","ccn0": "060"}, {"name": "Algeria", "code": "DZ","ccn0": "070"} ]});
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, an array of JSON object with a name property or a function. The function accepts two arguments, the queryvalue in the input field and the processcallback. The function may be used synchronously by returning the data source directly or asynchronously via the processcallback's single argument.
|
| items | number | 8 | The max number of items to display in the dropdown. Can also be set to 'all' |
| minLength | number | 1 | The minimum character length needed before triggering autocomplete suggestions. You can set it to 0 so suggestion are shown even when there is no text when lookup function is called. |
| showHintOnFocus | boolean | false | If hints should be shown when applicable as soon as the input gets focus. |
| scrollHeight | number, function | 0 | Number of pixels the scrollable parent container scrolled down (scrolled out the viewport). |
| matcher | function | case insensitive |
The method used to determine if a query matches an item. Accepts a single argument, the itemagainst which to test the query. Access the current query with this.query. Return a boolean trueif query is a match.
|
| sorter | function |
exact match, case sensitive, case insensitive |
Method used to sort autocomplete results. Accepts a single argument itemsand has the scope of the typeahead instance. Reference the current query with this.query.
|
| updater | function | returns selected item |
The method used to return selected item. Accepts a single argument, the itemand has the scope of the typeahead instance.
|
| highlighter | function | highlights all default matches |
Method used to highlight autocomplete results. Accepts a single argument itemand has the scope of the typeahead instance. Should return html.
|
| displayText | function | item.name || item |
Method used to get textual representation of an item of the sources. Accepts a single argument itemand has the scope of the typeahead instance. Should return a String.
|
| autoSelect | boolean | true | Allows you to dictate whether or not the first suggestion is selected automatically. Turning autoselect off also means that the input won't clear if nothing is selected and enteror tabis hit. |
| afterSelect | function | $.noop() | Call back function to execute after selected an item. It gets the current active item in parameter if any. |
| delay | integer | 0 | Adds a delay between lookups. |
| addItem | JSON object | false | Adds an item to the end of the list, for example "New Entry". This could be used, for example, to pop a dialog when an item is not found in the list of data. Example: http://cl.ly/image/2u170I1q1G3A/addItem.png |
