Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
by Alvin Olavarrieta
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
<div class="container">
<input type="text" class="form-control" placeholder="Type something..." />
</div>
CSS
body {
margin: 10px;
}
.dropdown-menu {
display: block;
}
JavaScript
//var results = {
//"data":[
// {"name":"Test","id":"1"},
// {"name":"Tom","id":"2"}
//]};
var results = {"data":[
{ "companyName": "Microsoft", "jobs": "5" },
{ "companyName": "Dell", "jobs": "6" },
{ "companyName": "Amazon", "jobs": "22" },
{ "companyName": "Ebay", "jobs": "14" },
{ "companyName": "Apple", "jobs": "1" },
]};
/*
* How can I also include the ID in the dropdown, so that it shows as "1 - Test" or "2 - Tom"?
*/
$('input').typeahead(
{
source: function(query, process)
{
return process(results.data);
},
highlighter: function(item)
{
return item;
},
displayText: function (item) {
//return item.companyName + ' - ' + item.jobs;
return item.companyName;
}
});