How to Use JSON Objects With Twitter Bootstrap Typeahead

Background

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. (More on Wiki).

You can visit their official site for more details. You need to download it and add the css file and javascript file to your project. In this post i am going to cover how can we use JSON Object to autocomplete text fields.

To the Code.....

Add the following in your java script. You can put all typeahead calls in a single function and then call that function from your javascript in the HTML (or JSP) page.

var states = [];
var    map = {};
$('#search').typeahead({

    minLength: 0,

    source : function(query, process) {        

        states = [];

        map = {};
        //hardcoding this JSON but this would technically come from server
        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);
    },
    matcher: function (item) {
        //If user enters * show all possible entries
        if(this.query.trim().toLowerCase() == "*") {
            return true;
        }
        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
            return true;
        }
    },
    updater: function (item) {
        //If you want to do something prior to updating value 
        selectedState = map[item].stateCode;
        return item;
    },
    sorter: function (items) {
        return items.sort();
    },
    highlighter: function (item) {
       // implementation
    },

});

Also you can override your typeahead class as follows for better looks

.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}

Thats it for the autocomplete feature of twitter bootstrap. You can make ajax call to get the JSON data as follows

function getData(url, data, successCallback, errorCallback) {
    var requestType = "POST";
    var dataType = "json";
    make_ajax_call(url, data, requestType, dataType, successCallback, errorCallback);
}

function make_ajax_call(url, data, requestType, dataType, successCallback, errorCallback) {
    
    var request = {
        url : url,
        type : requestType,
        data : data,
        dataType : dataType,
        success : successCallback,
        error : errorCallback,
        async : false
    };
    jQuery.ajax(request);

}

You can import jquery using

<script src="http://code.jquery.com/jquery.js"></script>