jQuery Live Search with Quicksilver Style in a Multi Select List Box
<p>I am trying to get John Resig's <a href="http://ejohn.org/apps/livesearch/" rel="nofollow">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">John Nunemaker's Work</a> developing his <a href="http://orderedlist.com/demos/quicksilverjs/javascripts/quicksilver.js" rel="nofollow">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">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>
