Jul 7 2008

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.