Live Search with QuickSilver Style (for jQuery)
I’ve been palling around with jQuery quite a bit lately. The other day I whipped together my first jQuery plugin and things finally clicked. In the comments of the original post, I mentioned doing a jQuery port.
Lucky for you, I ran into some free time this weekend. Without any further ado, I will now link you to a demo and give you some code to peruse.
(function($) {
var self = null;
$.fn.liveUpdate = function(list) {
return this.each(function() {
new $.liveUpdate(this, list);
});
};
$.liveUpdate = function (e, list) {
this.field = $(e);
this.list = $('#' + list);
if (this.list.length > 0) {
this.init();
}
};
$.liveUpdate.prototype = {
init: function() {
var self = this;
this.setupCache();
this.field.parents('form').submit(function() { return false; });
this.field.keyup(function() { self.filter(); });
self.filter();
},
filter: function() {
if ($.trim(this.field.val()) == '') { this.list.children('li').show(); return; }
this.displayResults(this.getScores(this.field.val().toLowerCase()));
},
setupCache: function() {
var self = this;
this.cache = [];
this.rows = [];
this.list.children('li').each(function() {
self.cache.push(this.innerHTML.toLowerCase());
self.rows.push($(this));
});
this.cache_length = this.cache.length;
},
displayResults: function(scores) {
var self = this;
this.list.children('li').hide();
$.each(scores, function(i, score) { self.rows[score[1]].show(); });
},
getScores: function(term) {
var scores = [];
for (var i=0; i < this.cache_length; i++) {
var score = this.cache[i].score(term);
if (score > 0) { scores.push([score, i]); }
}
return scores.sort(function(a, b) { return b[0] - a[0]; });
}
}
})(jQuery);
The cool thing about writing the same functionality with two different libraries is now you can compare a bit to see which implementation you like better. :)
If you want to learn more about why I did this, read the original post.
Update: The man himself, John Resig, has made the code a bit more efficient and jQuery-ish.
Post and Author Info.
Published July 07, 2008 by:
Commenting is currently off for this post.
So far there are 33 comments.
Awesome, excellent work!
The first technique using prototype was really nice, but using jQuery for the Quicksilver Search makes it even more attractive.