<!DOCTYPE HTML>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<style>
.bond {
text-align: center;
}
.bond img {
max-height: 50px;
}
</style>
</head>
<body>
<br/>
<div class="container">
<div class="row">
<div class="span12">
<form>
<input
type="text"
class="span6 typeahead"
placeholder="Who was your favorite James Bond?"
autocomplete="off"
data-provide="typeahead"
/>
<br/>
<input type="hidden" class="span1" name="bondId" id="bondId" value="" />
</form>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//underscorejs.org/underscore-min.js"></script>
<script type="text/javascript">
$(function(){
var bondObjs = {};
var bondNames = [];
//get the data to populate the typeahead (plus an id value)
var throttledRequest = _.debounce(function(query, process){
//get the data to populate the typeahead (plus an id value)
$.ajax({
url: 'bonds.json'
,cache: false
,success: function(data){
//reset these containers every time the user searches
//because we're potentially getting entirely different results from the api
bondObjs = {};
bondNames = [];
//Using underscore.js for a functional approach at looping over the returned data.
_.each( data, function(item, ix, list){
//for each iteration of this loop the "item" argument contains
//1 bond object from the array in our json, such as:
// { "id":7, "name":"Pierce Brosnan" }
//add the label to the display array
bondNames.push( item.name );
//also store a hashmap so that when bootstrap gives us the selected
//name we can map that back to an id value
bondObjs[ item.name ] = item;
});
//send the array of results to bootstrap for display
process( bondNames );
}
});
}, 300);
$(".typeahead").typeahead({
source: function ( query, process ) {
//here we pass the query (search) and process callback arguments to the throttled function
throttledRequest( query, process );
}
,highlighter: function( item ){
var bond = bondObjs[ item ];
return '<div class="bond">'
+'<img src="' + bond.photo + '" />'
+'<br/><strong>' + bond.name + '</strong>'
+'</div>';
}
, updater: function ( selectedName ) {
//note that the "selectedName" has nothing to do with the markup provided
//by the highlighter function. It corresponds to the array of names
//that we sent from the source function.
//save the id value into the hidden field
$( "#bondId" ).val( bondObjs[ selectedName ].id );
//return the string you want to go into the textbox (the name)
return selectedName;
}
});
});
</script>
</body>
</html>
[
{
"id":1
,"name":"Barry Nelson"
,"photo":"http://allyouneedislists.com/wp-content/uploads/2013/02/james-bond-actor-barry-nelson-008.jpg"
,"films": [
"Climax! Series: Casino Royale"
]
}
,{
"id":2
,"name":"David Niven"
,"photo":"http://allyouneedislists.com/wp-content/uploads/2013/02/james-bond-david-niven-007.jpg"
,"films": [
"Casino Royale (... is too much for one James Bond)"
]
}
,{
"id":3
,"name":"Sean Connery"
,"photo":"http://allyouneedislists.com/wp-content/uploads/2011/01/james-bond-sean-connery-007-face.jpg"
,"films": [
"Dr. No"
,"From Russia With Love"
,"Goldfinger"
,"Thunderball"
,"You Only Live Twice"
,"Diamonds Are Forever"
,"Never Say Never Again"
]
}
,{
"id":4
,"name":"George Lazenby"
,"photo":"http://allyouneedislists.com/wp-content/uploads/2011/02/george-lazenby-007-james-bond.jpg"
,"films": [
"On Her Majesty's Service"
]
}
,{
"id":5
,"name":"Roger Moore"
,"photo":"http://allyouneedislists.com/wp-content/uploads/2011/02/roger-moore-007-james-bond.jpg"
,"films": [
"Live and Let Die"
,"The Man with the Golden Gun"
,"The Spy who Loved Me"
,"Moonraker"
,"For Your Eyes Only"
,"Octopussy"
,"A View to a Kill"
]
}
,{
"id":6
,"name":"Timothy Dalton"
,"photo":"http://allyouneedislists.com/wp-content/uploads/2011/02/timothy-dalton-007-james-bond.jpg"
,"films": [
"The Living Daylights"
,"Licence To Kill"
]
}
,{
"id":7
,"name":"Pierce Brosnan"
,"photo":"http://allyouneedislists.com/wp-content/uploads/2011/02/pierce-brosnan-007-james-bond.jpg"
,"films": [
"Goldeneye"
,"Tomorrow Never Dies"
,"The World Is Not Enough"
,"Another Day"
]
}
,{
"id":8
,"name":"Daniel Craig"
,"photo":"http://allyouneedislists.com/wp-content/uploads/2011/02/daniel-craig-james-bond-007.jpg"
,"films": [
"Casino Royale"
,"Quantum of Solace"
,"Skyfall"
,""
]
}
]