AJAX: Delay for search on typing in form field
JavascriptAjaxFormsInputJavascript Problem Overview
On my website I use JavaScript/AJAX to do the search and show results while the user is still typing.
HTML (body):
<form action="" method="post" accept-charset="utf-8">
<p><input type="text" name="q" id="q" value="" onkeyup="doSearch(this.value)" /></p>
</form>
JavaScript (header):
function doSearch(text) {
// do the ajax stuff here
// call getResults.php?search=[text]
}
But this could cause a lot of requests coming to the server.
Thus I want to relieve the server by setting up a delay:
Whenever the onkeyup event is fired, the function doSearch() should show an "ajax loading graphic" and wait for 2 seconds. Only if the event is NOT fired again during these 2 seconds, the results should be fetched from the PHP file.
Is there any way to do this? Could you help me please? Thanks in advance!
Javascript Solutions
Solution 1 - Javascript
var delayTimer;
function doSearch(text) {
clearTimeout(delayTimer);
delayTimer = setTimeout(function() {
// Do the ajax stuff
}, 1000); // Will do the ajax stuff after 1000 ms, or 1 s
}
Solution 2 - Javascript
Simply setup the delayed invocation with setTimeout(), then remove it again on every event with clearTimeout()
HTML
<form action="" method="post" accept-charset="utf-8">
<p><input type="text" name="q" id="q" value="" onkeyup="doDelayedSearch(this.value)" /></p>
</form>
Javascript
var timeout = null;
function doDelayedSearch(val) {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
doSearch(val); //this is your existing function
}, 2000);
}
Solution 3 - Javascript
For this type of thing I tend to use a cunning little 'throttling' function created by Remy Sharp: