Twitter Bootstrap Typeahead - Id & Label

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;    }});                    

As of version 0.10.1 of Twitter Typeahead (https://github.com/twitter/typeahead.js), Id / Label is supported natively:

  $('input[name=address]').typeahead({        hint: false    }, {        source: function (query, cb) {            $.ajax({                url: '/api/addresses?q=' + encodeURIComponent(query),                dataType: 'json',                cache: false,                type: 'GET',                success: function (response, textStatus, jqXHR) {                    cb(response.data);                },                error: function (jqXHR, textStatus, errorThrown) {                }            });        },        name: 'addresses',        displayKey: 'text'    }).on('typeahead:selected', function (e, suggestion, name) {        window.location.href = '/' + suggestion.id;    });

If the example above, I'm passing an array of objects to the source callback (cb). By specifying displayKey: 'text', I'm telling the library to use the 'text' property for the auto-suggest. When the 'typeahead:select' callback is called, the second argument passed in (suggestion) contains the object that was selected.

To clarify what I was saying in my comment. If you wanted multiple type aheads on the same page you need to define each in a function and create a separate map variable for them.

function initFromField() {    var map;    $('#from:input.autocomplete').typeahead({        source: function(query, process) {            map = {};            var data = [{"id":1,"label":"machin"},{"id":2,"label":"truc"}] // Or get your JSON dynamically and load it into this variable            objects = constructMap(data, map);            process(objects);        },        updater: function(item) {            $('#hidden-from-input').val(map[item].id);            return item;        }    });}function initToField() {    var map;    $('#to: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            objects = constructMap(data, map);            process(objects);        },        updater: function(item) {            $('#hidden-to-input').val(map[item].id);            return item;        }    });}function constructMap(data, map) {    var objects = [];    $.each(data, function(i, object) {        map[object.label] = object;        objects.push(object.label);    });    return objects;}$(function initFields() {    initFromField();    initToField();});

Note how I scoped the map variable inside the two field initialization functions. This is important, it makes sure the same map variable is not used by both input fields.