Databases
StackOverflow2013
Postsdbo
POjQuery Live Search with Quicksilver Style in a Multi Select List Box
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Live Search with Quicksilver Style in a Multi Select List Box
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload