An Ajax Autocompleter with jQuery, including a Delayed Observer

[eluser]Vik[/eluser]
In case anybody happens to be looking for one, here's an Ajax Autocompleter using jQuery, and including a delayed observer, so that you don't get an Ajax hit after every keypress.

Note - this autocompleter does not give you a drop-down menu of items from the text input box; instead it updates the a div on your web page (id="search-results") with the results of the search. (This approach is demonstrated for Mootools/CodeIgniter on this site.)

Code:

/*JAVASCRIPT */
/*
jQuery delayed observer
(c) 2007 - Maxime Haineault ([email protected])
http://www.studio-cdd.com:8080/haineault/blog/17/
*/

jQuery.fn.extend({
    delayedObserver:function(delay, callback){
        $this = $(this);
        if (typeof window.delayedObserverStack == 'undefined') {
            window.delayedObserverStack = [];
        }
        if (typeof window.delayedObserverCallback == 'undefined') {
            window.delayedObserverCallback = function(stackPos) {
                observed = window.delayedObserverStack[stackPos];
                if (observed.timer) clearTimeout(observed.timer);
                
                observed.timer = setTimeout(function(){
                    observed.timer = null;
                    observed.callback(observed.obj.val(), observed.obj);
                }, observed.delay * 1000);

                observed.oldVal = observed.obj.val();
            }
        }
        window.delayedObserverStack.push({
            obj: $this, timer: null, delay: delay,
            oldVal: $this.val(), callback: callback });
            
            stackPos = window.delayedObserverStack.length-1;
        
        $this.keyup(function() {
            observed = window.delayedObserverStack[stackPos];
                if (observed.obj.val() == observed.obj.oldVal) return;
                else window.delayedObserverCallback(stackPos);
        });
    }
});


$(document).ready(function()
{
        $('#searchterm').delayedObserver(0.5, function(value, object)
        {
          //controller's URI
             var theSearchString = $("#searchterm").val();
             var url = '/ajaxsearch';
        
              $("#search-results").load(url, {searchterm: theSearchString});        
         });    
  });