title: jQuery Live Search with Quicksilver Style in a Multi Select List Box
body: <p>I am trying to get John Resig's <a href="http://ejohn.org/apps/livesearch/" rel="nofollow noreferrer">jQuery Live Search with Quicksilver Style</a> to work with a select multi form control. His code is based  <a href="http://orderedlist.com/articles/live-search-with-quicksilver-style-for-jquery/" rel="nofollow noreferrer">John Nunemaker's Work</a> developing his <a href="http://orderedlist.com/demos/quicksilverjs/javascripts/quicksilver.js" rel="nofollow noreferrer">quicksilver.js</a> code.</p>
  
  <p>The problem I am having is that within a select box only Firefox supports .hide() on option values, I can't figure out a snappy approach for IE, Safari, Opera and Chrome.</p>
  
  <p>Here is an example, I have inlined John R's code but you will need to grab <a href="http://orderedlist.com/demos/quicksilverjs/javascripts/quicksilver.js" rel="nofollow noreferrer">quicksilver.js</a> and host it locally yourself. Again this works great in Firefox but the call to rows.hide() does nothing on other browsers.</p>
  
  <p>I have tried wrapping the  tags in in a div and hiding that but no luck.</p>
  
  <p>Any ideas?</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;LiveSearch&lt;/title&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript" src="../jquery/quicksilver.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript" charset="utf-8"&gt;
       $(document).ready(function() {
          $('#q').liveUpdate('#posts').focus();
       });
  
       jQuery.fn.liveUpdate = function(list){
         list = jQuery(list);
  
         if ( list.length ) {
             // Changed 'li' to 'option' below
             var rows = list.children('option'),
                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 &gt; 0) { scores.push([score, i]); }
                 });
  
                 jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
                     jQuery(rows[ this[1] ]).show();
                 });
             }
         }
       };
  
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form method="get" autocomplete="off" action=""&gt;
  
    &lt;div&gt;
       &lt;input type="text" value="" name="q" id="q"&gt;&lt;br&gt;&lt;br&gt;
  
       &lt;select id="posts" multiple name="choices" SIZE="10" style="width: 250px"&gt;
          &lt;option value="1"&gt;The Well-Designed Web&lt;/option&gt;
          &lt;option value="2"&gt;Welcome John Nunemaker&lt;/option&gt;
          &lt;option value="3"&gt;Sidebar Creative: The Next Steps&lt;/option&gt;
          &lt;option value="4"&gt;The Web/Desktop Divide&lt;/option&gt;
          &lt;option value="5"&gt;2007 in Review&lt;/option&gt;
          &lt;option value="6"&gt;Don't Complicate the Solution&lt;/option&gt;
          &lt;option value="7"&gt;Blog to Business&lt;/option&gt;
          &lt;option value="8"&gt;Single Line CSS&lt;/option&gt;
          &lt;option value="9"&gt;The Great Divide&lt;/option&gt;
          &lt;option value="10"&gt;What's in a Name?&lt;/option&gt;
       &lt;/select&gt;
  
    &lt;/div&gt;
  
  
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>