Run jquery ajax request when user finishes typing

Question

I Am working on my project i have added feature for image search and i am having little trouble i have bounded min 2 characters when ajax fire but when i type more then 2 chars ajax run after every letter i don't want that to happen instead i want to run ajax only after when user finishes typing i found few questions related to this i have tried as much as i can but they did not helped me.

Update:- And one more thing when user clears input box my loader is still there i want to hide loader if input is empty

My Jquery:-

 $(function() {
 var minlength = 2;
  $("#image_query").keyup(function() {
    $('#span_result').html('<div class="loader">Loading...</div>');
    var that = this,
        value = $(this).val();
    if (value.length >= minlength) {
        $.ajax({
            type: "GET",
            url: "image.php",
            data: {
                'image_query': value
            },
            dataType: "text",
            success: function(html) {
                if (value == $(that).val()) {
                    $("#span_result").html(html)
                }
            }
        })
    }
 })
});

My HTML:-

<form method="get" action="">
<input type="text" id="image_query" placeholder="Search Here For Images">
<button type="submit">Go</button>

There are two options: throttling, or debouncing. debouncing is likely what you were looking for, but throttling would give you better results. Here's a plugin that does both: http://benalman.com/projects/jquery-throttle-debounce-plugin/ — Kevin B, Dec 29 '14 at 18:29

score 2 · Answer 1 · answered May 04 '19 at 21:17

Although there are probably more optimal ways - I always find this the easiest and best ways. I think this is what you are looking for. Also please note the hide image should go in the ajax success callback.

var timeout = null;
var minlength = 2;

$("#image_query").keyup(function() {
  $('#span_result').html('<div class="loader">Loading...</div>');

  // clear last timeout check
  clearTimeout(timeout);

  var that = this;
  var value = $(this).val();

  if (value.length >= minlength) {
    //
    // run ajax call 1 second after user has stopped typing
    //
    timeout = setTimeout(function() {
      $.ajax({
        type: "GET",
        url: "image.php",
        data: {
          'image_query': value
        },
        dataType: "text",
        success: function(html) {
          // hide image
          $(#span_result .loader).hide();

          if (value == $(that).val()) {
            $("#span_result").html(html)
          }
        }
      });
    }, 1000);
  });
});

Domain · Answer 2 · 2014-12-30T08:18:18.427

0

I think, then you should use setTimeout() along with keyup event before sending the ajax request. The delay could be 2 or 3 seconds, as per your need.

Edit: To clear the loader image, you can do following:

$(#span_result .loader).hide();

At the end inside AJAX response.

edited Dec 30 '14 at 08:18

answered Dec 29 '14 at 18:49

Domain

11,562
3
23
44

can u provide example ? i am new to jquery – royleewheels Dec 29 '14 at 18:53
1

This is a good example http://stackoverflow.com/questions/1909441/jquery-keyup-delay you can use value '2000' to delay it by 2 seconds. – Domain Dec 29 '14 at 18:55
yeah i just found that its like what i want but there is one problem when i clears up input box my loader is still there so how can i stop loader when user clears and input is empty ? – royleewheels Dec 29 '14 at 19:01

score -1 · Answer 3 · answered Dec 29 '14 at 18:33

-1

You could use the jQuery blur() method to capture when the user is finished with input. Then check for minlength inside the blur function before your ajax call.

You can find an example of blur in W3 schools here

answered Dec 29 '14 at 18:33

MsTapp

449
1
10
17

i looked blur but blur works when user clicks out side input box in my case user will type and i wanna use keyup function but i want to trigger ajax when user finishes typing say 2 sec or more . – royleewheels Dec 29 '14 at 18:37

Run jquery ajax request when user finishes typing

3 Answers3