Autocomplete

Autocomplete - Bootstrap Typeahead

This template comes with an integration of TypeAhead autocomplete plugin. See more about it at https://github.com/bassjobsen/Bootstrap-3-Typeahead or simply try out some nice examples of its functionality below.

Basic example - data attributes initialization

Try typing "ite".

<input type="text"
data-provide="typeahead"
data-source='["item 1","item 2","item 3"]'
placeholder="item..."
class="form-control" />                        

Loading JSON array

Try typing your country.

$.get('data/countries.json', function(data){
    $("#typeahead2").typeahead({ source:data.countries });
},'json');                         

Basic example - JavaScript initialization

Try typing "ite".

$('#typeahead4').typeahead({
    source: ["item 1","item 2","item 3"]
});                   

Custom search in JSON object

Try typing "Whi" -> it searches in surnames, firstnames, company names. After you select the item, person's email is inserted into the input field.

$('#typeahead3').typeahead({
    displayText: function (item) {
        return item.name + ' ' + item.surname + ', ' + item.company
    },
    afterSelect: function (item) {
        this.$element[0].value = item.email
    },
    source: [
        { "name": "Alyce", "surname": "White", "company": "Combot", "email": "alycewhite@combot.com", "city": "Talpa" },
        { "name": "Santos", "surname": "Pierce", "company": "Franscene", "email": "santospierce@franscene.com", "city": "Vienna" },
        { "name": "Deirdre", "surname": "Reed", "company": "Whiskey Comp.", "email": "deirdrereed@whiskeycomp.com", "city": "Belva" },
        { "name": "Whitaker", "surname": "Brennan", "company": "Opticom", "email": "whitakerbrennan@opticom.com", "city": "Lodoga" },
        { "name": "Kristin", "surname": "Norman", "company": "Irack", "email": "kristinnorman@irack.com", "city": "Bodega" }
    ]
});                 

Typeahead options

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 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. 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 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

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.
updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
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.
displayText function item.name || item Method used to get textual representation of an item of the sources. Accepts a single argument item and 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 enter or tab is 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