Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need some help with Live Search jQuery implementation

    Hi, I found this very useful tutorial for implementing a Live Search using jQuery:
    http://blog.ninetofive.me/blog/build...php-and-mysql/

    But it is a bit slow since the search is done with each letter that is typed.

    I noticed that in the tutorial's comments, one user proposed the following modification to make it work faster:

    Quote Originally Posted by Alexander Drachan
    The search-engine is awsome, thank you for you work!!!
    Wanted to say that I had to add this into the js to make it work faster:
    You have to stop the queries while the text is being typed.

    var ajaxRequest;
    function search() {
    ajaxRequest = $.ajax({…})
    }
    $(“input#search”).live(“keyup”, function(e) {
    if (search_string == ”) {
    }else{
    if (ajaxRequest) {ajaxRequest.abort();}
    $(this).data(‘timer’, setTimeout(search, 100));
    };
    });

    Hope that helps. Cheers!
    Since I have not worked with JavaScript or jQuery before, I am not sure how to implement his solution. I have not been able to get hold of the person who posted that comment. Would appreciate it if someone can explain to me how to implement Alexander's modification.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    it doesn't look like his solution works anyway. it just makes the search happen 1/10th of a second later. it still stacks up requests. better would be to not search unless there are at least two letters and then wait 1/4th of a second from the last keypress to search, canceling any queued search if a new letter is pressed.

    that could look something like this:

    Code:
    $(“input#search”).live("keyup", function(e) {
      clearTimeout(this.timer);
      if (e.value.length>1) {
         this.timer=setTimeout(search, 250);
      }
    });
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I tried that, but it doesn't work. Must I replace the "$(“input#search”).live("keyup", function(e)" function with the one you provided? I did that but now it doesn't perform searches anymore. What I really want to do is stop the queries while text is being typed, as Alexander suggested. I'm just not sure how to implement his solution.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Did you change the "curly" quotes to regular straight quotes " "?

    Code:
    $(input#search).live("keyup", function(e) {
      clearTimeout(this.timer);
      if (e.value.length>1) {
         this.timer=setTimeout(search, 250);
      }
    });

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I did. But it doesn't work.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Change:

    Code:
    if (e.value.length>1) {
    to:

    Code:
    if (this.value.length>1) {

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still doesn't work.

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Notice: .live() has been deprecated since jQuery version 1.7, and with jQuery version 1.9 it has even been removed. Check for .on() instead

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by Tafalezono View Post
    Still doesn't work.
    Then post your code.

    I agree with devnull69. You should use .on().

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    tested.

    Code:
    /* JS File */
    
    // Start Ready
    $(document).ready(function() {  
    
    	// Icon Click Focus
    	$('div.icon').click(function(){
    		$('input#search').focus();
    	});
    
    	// Live Search
    	// On Search Submit and Get Results
    
    
    function search() {
    	    var query_value = search.term;
    	    $('b#search-string').html(query_value);
    		if(query_value !== ''){
    			$.ajax({
    				type: "POST",
    				url: "search.php",
    				data: { query: query_value },
    				cache: false,
    				success: function(html){
    					if(query_value==$('input#search').val()){ $("ul#results").html(html); }
    				}
    			});
    		}
           return false;    
    	}
    
    	$("input#search").on("input", function(e) {
    		// Set Timeout
    	    clearTimeout(search.timer);
    
    	    // Set Search String
    	    var search_string = e.target.value;
            search.term=search_string;
    
    	    // Do Search
    	    if (search_string.length<3) {
    	    	$("ul#results").fadeOut();
    	    	$('h4#results-text').fadeOut();
    	    }else{
    	    	$("ul#results").fadeIn();
    	    	$('h4#results-text').fadeIn();
    	    	search.timer=setTimeout(search, 250);
    	    };
    	    
    	});
    
    
    
    });
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #11
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's excellent rnd me, thanks very much. That works great. The only thing I notice now is that the results of the previous search are displayed when doing a new search. Is there a way to clear this?

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Tafalezono View Post
    That's excellent rnd me, thanks very much. That works great. The only thing I notice now is that the results of the previous search are displayed when doing a new search. Is there a way to clear this?
    to show a search is being done, and to clear the old result, just set the .html() of the viewer on search:

    turn
    Code:
    function search() {
    	    var query_value = search.term;
    into

    Code:
    function search() {
    	    var query_value = search.term;
               $("ul#results").html("<progress indeterminate>Searching for <q>"+query_value+"</q>...</progress>");
    the rest is the same.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #13
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that works great, but I prefer to only show some text ("Searching...") while the search is being performed, instead of the progress bar, so here is what I used:

    replaced:
    Code:
    function search() {
    	    var query_value = search.term;
    with:
    Code:
    function search() {
    	    var query_value = search.term;
               $("ul#results").html("<li class='result'><h3>Searching...</h3></li>");
    By the way: I added a logger to the search.php file to see how many times it is called when doing a typical search, and was surprised to see that it is called about 4-6 times with every search (even if you type the search word quickly). Why would that be? One would expect with your modification that it would only be called once with every search.

  • #14
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So any idea why the search.php script is still called about 4-6 times with every search with your modification (as I mentioned above), even if you type the search term quickly? One would expect it to be only called once.

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    I think the ajax request needs to be aborted when resetting the search because there may be cases where you do clearTimeout but the ajax request might have already started.

    PHP Code:
    var jqxhr;
    function 
    search() {
        var 
    query_value search.term;
        $(
    'b#search-string').html(query_value);
        if (
    query_value !== '') {
            
    jqxhr = $.ajax({
            ... 
    PHP Code:
    $("input#search").on("input", function (e) {
            
    // Set Timeout
            
    clearTimeout(search.timer);
            if (
    jqxhr) {
                
    jqxhr.abort();
                
    jqxhr null;
            }
            ... 


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •