Pierre de LESPINAY Pierre de LESPINAY - 7 months ago 73
Javascript Question

Twitter Bootstrap Typeahead - Id & Label

I'm using bootstrap 2.1.1 and jquery 1.8.1 and trying to use typeahead's functionality.

I try to display a label and use an id like a standard

<select />


Here is my typeahead initialization:

$(':input.autocomplete').typeahead({
source: function (query, process) {
$('#autocompleteForm .query').val(query);
return $.get(
$('#autocompleteForm').attr('action')
, $('#autocompleteForm').serialize()
, function (data) {
return process(data);
}
);
}
});


Here is the kind of json that I'm sending

[{"id":1,"label":"machin"},{"id":2,"label":"truc"}]


How can I tell
process()
to display my labels and store the selected id in another hidden field ?

Answer

There's a great tutorial here that explains how to do this: http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/ (read my comment on that page if it hasn't been reflected yet in the main part of the post).

Based on that tutorial, and the JSON you provided, you can do something like this:

$(':input.autocomplete').typeahead({
    source: function(query, process) {
        objects = [];
        map = {};
        var data = [{"id":1,"label":"machin"},{"id":2,"label":"truc"}] // Or get your JSON dynamically and load it into this variable
        $.each(data, function(i, object) {
            map[object.label] = object;
            objects.push(object.label);
        });
        process(objects);
    },
    updater: function(item) {
        $('hiddenInputElement').val(map[item].id);
        return item;
    }
});                    
Comments