Twitter Bootstrap Typeahead

Here is the structure of the bootstrap typeahead script

$('#search').typeahead({
    source: function (query, process) {
        // implementation
    },
    updater: function (item) {
        // implementation
    },
    matcher: function (item) {
        // implementation
    },
    sorter: function (items) {
        // implementation
    },
    highlighter: function (item) {
       // implementation
    },
});

1. source
This option specifies the data set to use for the auto-suggest list. It can take either an array of strings (which we saw in the first example) or a function:

source: function (query, process) {
    states = [];
    map = {};
 
    var data = [
        {"stateCode": "CA", "stateName": "California"},
        {"stateCode": "AZ", "stateName": "Arizona"},
        {"stateCode": "NY", "stateName": "New York"},
        {"stateCode": "NV", "stateName": "Nevada"},
        {"stateCode": "OH", "stateName": "Ohio"}
    ];
 
    $.each(data, function (i, state) {
        map[state.stateName] = state;
        states.push(state.stateName);
    });
 
    process(states);
},

2. updater
This function is called by Bootstrap once the user selects an item, which gives us a chance to do something with the selection

updater: function (item) {
    selectedState = map[item].stateCode;
    return item;
}

3. matcher
This function is used by Bootstrap to check if the search string typed by the user matches anything in the source list. Its purpose is to filter the auto-suggest list to only the relevant values:

matcher: function (item) {
    if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
        return true;
    }
}

4. sorter
The Sorter function is responsible for sorting the list of suggestions filtered by the matcher:

sorter: function (items) {
    return items.sort();
}

5. highlighter
This function is used to highlight user’s input within auto-suggested results.

highlighter: function (item) {
    var regex = new RegExp( '(' + this.query + ')', 'gi' );
    return item.replace( regex, "$1" );
}

References:

How to Use JSON Objects With Twitter Bootstrap Typeahead