Customized typeahead.js for displaying images with text in search

Rendering Images related to search query with respect to .JSON backend file/

by Shobhit Sharma

HTML

<div class="container">
    <div class="row">
        <div class="span12">
            <form>
                <input type="text" class="span6 typeahead" placeholder="enter search.." autocomplete="off" data-provide="typeahead" />
                <br/>
                <input type="hidden" class="span1" name="testId" id="testId" value="" />
            </form>
        </div>
    </div>
</div>

JavaScript

$(function () {

    var testObjs = {};
    var testNames = [];

    //get the data to populate the typeahead (plus an id value)
    var throttledRequest = _.debounce(function (query, process) {
        //get the data to populate the typeahead (plus an id value)
        $.ajax({
            url: '< your json url here>',
            cache: false,
            success: function (data) {
                //reset these containers every time the user searches
                //because we're potentially getting entirely different results from the api
                testObjs = {};
                testNames = [];

                //Using underscore.js for a functional approach at looping over the returned data.
                _.each(data, function (item, ix, list) {

                    //for each iteration of this loop the "item" argument contains
                    //1 test object from the array in our json, such as:
                    // { "id":7, "name":"Pierce Brosnan" }

                    //add the label to the display array
                    testNames.push(item.name);

                    //also store a hashmap so that when bootstrap gives us the selected
                    //name we can map that back to an id value
                    testObjs[item.name] = item;
                });

                //send the array of results to bootstrap for display
                process(testNames);
            }
        });
    }, 300);


    $(".typeahead").typeahead({
        source: function (query, process) {

            //here we pass the query (search) and process callback arguments to the throttled function
            throttledRequest(query, process);

        },
        highlighter: function (item) {
            var test = testObjs[item];

            return '<div class="test">' + '<img src="' + test.photo + '" />' + '<br/><strong>' + test.name + '</strong>' + '</div>';
        },
        updater: function (selectedName) {

            //note that the...