jQuery Forum

« Back
You are in : Recent Topics » Using jQuery » How to Attach This Autocompleter to This... [SOLVED]
vikr.jquery

How to Attach This Autocompleter to This... [SOLVED]
by 
vikr.jquery
 on 05-Nov-2007 06:22 AM.
  in  Using jQuery 
I have a working Ajax/jQuery Autocompleter:

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

                    if(htmlStr == '')
                        $('#search_results_header').html("<p>Items will appear here when you search. </p>");
               else
                  $('#search_results_header').html("<p><i>Please <b>confirm</b> your selection by clicking it:</i></p>  </p>");
            });
   });
}); 


Now I want to attach a "delayed observer" to it. This is code that will wait for the user to stop typing before it calls the Ajax code and hits my server. This way my jQuery code won't hit my server on every single keypress.

I found this delayed observer code for jQuery at http://www.studio-cdd.com:8080/haineault/blog/17/.

/*
jQuery delayed observer
(c) 2007 - Maxime Haineault (max@centdessin.com)
*/

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);
        });
    }
});



As a jQuery newbie, I don't yet see how to attach the observer code to the autocomplete code.

What is the correct way to do this?

Thanks very much in advance to all for any info.
  • No status
  • Working on it
  • Answered
  • Need more info
vikr.jquery

Re: How to Attach This Autocompleter to This... [SOLVED]

by 
vikr.jquery
 on 05-Nov-2007 11:52 AM
I found the answer. It's very cool. You just drop out the keyup code and replace it with the observer code:

$(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},
              function()
                 {
                    var htmlStr = $("#search-results").html();
   
                              if(htmlStr == '')
                                    $('#search_results_header').html("<p>Items will appear here when you search. </p>");
                  else
                     $('#search_results_header').html("<p><i>Please <b>confirm</b> your selection by clicking it:</i></p>  </p>");
                 });      
      });    
});
chrysb

Re: How to Attach This Autocompleter to This... [SOLVED]

by 
chrysb
 on 08-Nov-2007 04:38 AM
Awesome. Thanks for posting the answer!
 Back
 Top
Post Actions
Statistics
  • 2
     Replies
  • 581
     Views
  • 0
     Followers
Tags for the post
No tags available for this topic.

Edit Link Delete Link

Edit Link Delete Link

LoadingImage