JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//underscorejs.org/underscore-min.js"></script>
<input type="text" id="typeahead" data-provide="typeahead" /><br /><br />
Selected: <input type="text" id="getSelection" /><br />
Value: <input type="text" id="getValue" />

CSS

body {
    padding: 10px;
}

JavaScript

$('#typeahead').typeahead({
    source: function(query, process) {
        // This is where your ajax call would be
        objects = [];
        map = {};
        var data = [
            {"id":1,"label":"Foo","value":"Value of Foo"},
            {"id":2,"label":"Bar","value":"Value of Bar"},
            {"id":3,"label":"Foo Bar","value":"Value of Foo Bar"}
        ];
        $.each(data, function(i, object) {
            map[object.label] = object;
            objects.push(object.label);
        });
        process(objects);
    },
    updater: function(item) {
        $('#getSelection').val(map[item].label);
        $('#getValue').val(map[item].value);
        return item;
    }
});