How can I start ajax function seconds after the user finishes typing

Question

Good night I would like to know if it is possible in the code below to insert this function in ajax. I would like to only submit the search after 2 seconds of the user finishing typing, replacing the "onkeyup".

PS:This is for an Ajax Live Search.

function pesquisar(value) {
$("#results").show();
$.ajax({
    type:'post', 
    url:'/classes/searchfetch.php', 
    data: {s:value},    
    success: function (data){
        $("#results").html(data);
    },
}); };

I would be very grateful if you could help me.

What happens if user stops typing for more than 2 secs for some reason and then wants to start typing again? — toothful, Dec 27 '16 at 04:03
You could use `setTimeout` and `clearTimeout` to stop/start timers onKeyUp. — ccKep, Dec 27 '16 at 04:06
FYI one keyword for this is called `debounce` in case you want to look up more things like it in the future. — therobinkim, Dec 27 '16 at 04:28
This might help: https://schier.co/blog/2014/12/08/wait-for-user-to-stop-typing-using-javascript.html — Cannicide, Feb 22 '18 at 00:55

score 1 · Answer 1 · answered Dec 27 '16 at 04:06

1

Can use a timer that would also get canceled if user continues within the 2 seconds

var timer;

$('input').keyup(function(){
   // clear prior timeout
   clearTimeout(timer);
   // create new one
   timer = setTimeout(pesquisar, 2000)

})

answered Dec 27 '16 at 04:06

charlietfl

170,828
13
121
150

score 1 · Accepted Answer · edited Sep 29 '17 at 04:53

1

In order to start a search after the user finished typing, we can start a timer when the user releases a key and stop it if he pressess one. If the difference between these two events is more than 2 seconds our event will be fired. Assuming your input has id as inp

 var timer;

//Start a timer on keyup event
$('#inp').on('keyup', function () {
  //add loading indicator
  $('#results').html("<img src='loading.gif'>");
  clearTimeout(timer);       // clear timer
  timer = setTimeout(pesquisar, 2000);
});


$('#inp').on('keydown', function () {
  clearTimeout(timer);       // clear timer if user pressed key again
});

/call ajax function when user finished typing
function pesquisar(value) {
$("#results").show();
$.ajax({
    type:'post', 
    url:'/classes/searchfetch.php', 
    data: {s:value},    
    success: function (data){
        $("#results").html(data);
    },
}); };

edited Sep 29 '17 at 04:53

diagold

493
1
7
28

answered Dec 27 '16 at 04:06

Shubham Khatri

270,417
55
406
400

One more thing, it happens that before it had the attribute onkeyup that sent the value. Now how do I do? – Alexandre Geraldo Dec 27 '16 at 04:28
I did not understand what you wanted to say – Shubham Khatri Dec 27 '16 at 04:36
Forget it, i already found a solution. Thank you very much. – Alexandre Geraldo Dec 27 '16 at 05:19

How can I start ajax function seconds after the user finishes typing

2 Answers2