Bootstrap 3 & Typeahead.js example

How to use datum and custom event in typeahead.js.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.js"></script>
<input type="text" class="fake-hidden form-control" placeholder="fake hidden" disabled>
<input type="text" class="typeahead form-control" placeholder="Location">

CSS

.tt-hint {
    display: none
}

JavaScript

$(function () {
    $('.typeahead').typeahead({
    		
        name: 'Location',
        local: [{
            value: 'Bangkok',
            tokens: ['Bang', 'Cock'],
            id: 2
        }, {
            value: 'Kuala Lumpur',
            tokens: ['Kuala', 'Lumpur', 'la'],
            id: 3
        }]
    });

    $('.typeahead').on('typeahead:selected', function (e, datum) {
        $('.fake-hidden').val(datum.id);
    });
});