// either bootstrap or AJAX your data to search through
var DATAZ = []; // an array of JSON objects, each with a 'name' key
$('.autocomplete').bind('keyup focus', function(e){
$('.suggest').empty().hide(); // cleanup
var $this = $(this),
val = $this.val();
if(val.length < 1) return; // no need if nothing is there
var $suggest = $this.next('.suggest'),
suggestions = [],
best;
_.each(DATAZ, function(d){ // loop through our data
d.score = d.name.score(val); // score it based on user input
suggestions.push(d); // add it to our suggestions
});
// don't want any losers:
best = _.reject(suggestions, function(s){ return s.score === 0; });
if(best.length === 0) return; // bummer, no match
// sort by each suggestions score in descending order:
best = _.sortBy(best, function(s){ return -(s.score); });
// add the suggestions to our list:
$.each(best, function(){
var $li = $('<li>'+this.name+'</li>').data('info', this);
$suggest.append($li);
});
$suggest.show(); // the big reveal
})
.blur(function(){
$(this).next('.suggest').empty().hide(); // user is moving on...
});