Run jquery ajax request when user finishes typing - php

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>

Answer 1

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

Answer 2

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.

Answer 3

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