tbeseda
4/14/2011 - 5:07 PM

scored_suggestions.js

// 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...
});