Resig’s LiveSearch plugin

by Denzen

HTML

<script src="http://static.railstips.org/orderedlist/demos/quicksilverjs/javascripts/quicksilver.js"></script>
<input type="search" id="search"/>
<ul id="list">
  <li>Foo</li>
  <li>Bar</li>
  <li>Foobar</li>
  <li>Baz</li>
</ul>

JavaScript

// http://ejohn.org/blog/jquery-livesearch

jQuery.fn.liveUpdate = function(list){
  list = jQuery(list);
  if ( list.length ) {
    var rows = list.children('li'),
      cache = rows.map(function(){
        return this.innerHTML.toLowerCase();
      });
      
    this
      .keyup(filter).keyup()
      .parents('form').submit(function(){
        return false;
      });
  }
    
  return this;
    
  function filter(){
    var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
    
    if ( !term ) {
      rows.show();
    } else {
      rows.hide();

      cache.each(function(i){
        var score = this.score(term);
        if (score > 0) { scores.push([score, i]); }
      });

      jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
        jQuery(rows[ this[1] ]).show();
      });
    }
  }
};

$('#search').liveUpdate("#list");