Adding Label, value and picture in Bootstrap's Typeahead

Question

I am playing around with Typeahead and I am trying to figure out if there is a way to display Pictures and Labels in the search query as well? Something like how Twitter does wh

Answer 1

You can try to use the following customized code for rendering images containing with the JSON schema.

Please follow the fiddle link here for implementation and testing.

The typeahead looks like:

    $(".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 '
' + '' + '
' + test.name + '' + '
';
    },
    updater: function (selectedName) {

        //note that the "selectedName" has nothing to do with the markup provided
        //by the highlighter function. It corresponds to the array of names
        //that we sent from the source function.

        //save the id value into the hidden field
        $("#testId").val(testObjs[selectedName].id);

        //return the string you want to go into the textbox (the name)
        return selectedName;
    }
});