Geek Answers Handbook

JQuery Live Search with Quicksilver Style in a multi-user list

I am trying to get John Resig jQuery Live Search with Quicksilver Style to work with a multi-form control. Its code is based on John Nunemaker Work , developing its quicksilver.js code.

The problem I encountered is that only in the selection window only Firefox supports .hide () in the parameter values, I can not find a quick approach for IE, Safari, Opera and Chrome.

Here is an example, I entered the John R code, but you will need to grab quicksilver.js and place it locally yourself. Again, this works fine in Firefox, but calling rows.hide () does nothing in other browsers.

I tried wrapping the tags in a div and hiding this, but no luck.

Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>LiveSearch</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script type="text/javascript" src="../jquery/quicksilver.js"></script> <script type="text/javascript" charset="utf-8"> $(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 > 0) { scores.push([score, i]); } }); jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){ jQuery(rows[ this[1] ]).show(); }); } } }; </script> </head> <body> <form method="get" autocomplete="off" action=""> <div> <input type="text" value="" name="q" id="q"><br><br> <select id="posts" multiple name="choices" SIZE="10" style="width: 250px"> <option value="1">The Well-Designed Web</option> <option value="2">Welcome John Nunemaker</option> <option value="3">Sidebar Creative: The Next Steps</option> <option value="4">The Web/Desktop Divide</option> <option value="5">2007 in Review</option> <option value="6">Don't Complicate the Solution</option> <option value="7">Blog to Business</option> <option value="8">Single Line CSS</option> <option value="9">The Great Divide</option> <option value="10">What in a Name?</option> </select> </div> </form> </body> </html>
+6
javascript jquery
source share
1 answer

The best way is to simply add and remove options from the DOM.

Like this:

  <script type="text/javascript" charset="utf-8"> $(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(); }); var all = rows; all.each(function(i){ $(this).attr("itext", 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 ) { list.append(all); } else { rows.remove(); all.each(function(i){ var score = $(this).attr("itext").score(term); if (score > 0) { scores.push([score, i]); } }); jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){ list.append(all[this[1]]); }); rows = list.children('option'); } } }; </script>

EDIT:

It is necessary to hammer an array of "everything", not the string.

+8
source share

More articles:


All Articles