624

I want to trigger an ajax request when the user has finished typing in a text box. I don't want it to run the function on every time the user types a letter because that would result in A LOT of ajax requests, however I don't want them to have to hit the enter button either.

Is there a way so I can detect when the user has finished typing and then do the ajax request?

Using jQuery here!

5
  • 27
    I think you'll need to define "finish typing" for us. Commented Nov 18, 2010 at 22:14
  • 8
    While @Surreal Dreams' answer satisfies most of your requirements, if the user starts typing again AFTER the specified timeout, multiple requests will be sent to the server. See my answer below which stores each XHR request in a variable and cancels it before firing off a new one. This is actually what Google does in their Instant search.
    – Marko
    Commented Nov 18, 2010 at 22:33
  • The chosen answer is incorrect for a few reasons: 1. It always fires after 5 seconds even if user is typing. 2. It doesn't wait until user has finished typing as requested. 3. It fires multiple requests as mentioned by @Marko above. See my corrected answer below.
    – going
    Commented May 8, 2011 at 10:28
  • 1
    What about blur? I guess the user has definitely finished typing when the input element loses focus.
    – Don P
    Commented Aug 31, 2016 at 19:54
  • 11
    A simple google search could've gotten you the simple answer: schier.co/blog/2014/12/08/…
    – Cannicide
    Commented Feb 22, 2018 at 0:54

33 Answers 33

828

So, I'm going to guess finish typing means you just stop for a while, say 5 seconds. So with that in mind, let's start a timer when the user releases a key and clear it when they press one. I decided the input in question will be #myInput.

Making a few assumptions...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}
23
  • 42
    This answer does not work correctly, it will always fire after 5 seconds unless the user types very slowly. See working solution below.
    – going
    Commented May 8, 2011 at 10:07
  • 4
    If you run into trouble here, because the timer fires immediately, try to add quotes around the function call: setTimeout('functionToBeCalled', doneTypingInterval);
    – Largo
    Commented Jul 13, 2012 at 10:08
  • 2
    Doesn't work when you copy/paste data into the field.
    – Jessica
    Commented Jan 20, 2014 at 18:56
  • 5
    I'm seeing a few comments where the callback function, doneTyping in the example, is running immediately. That's usually a result of accidentally including () after the function name. Note that it should read setTimeout(doneTyping, not setTimeout(doneTyping(), Commented Jun 19, 2015 at 23:29
  • 2
    @Jessica to work with paste you have to add 'paste' event like this: on('keyup paste',
    – Sergey
    Commented Apr 1, 2016 at 13:17
485

The chosen answer above does not work.

Because typingTimer is occassionaly set multiple times (keyup pressed twice before keydown is triggered for fast typers etc.) then it doesn't clear properly.

The solution below solves this problem and will call X seconds after finished as the OP requested. It also no longer requires the redundant keydown function. I have also added a check so that your function call won't happen if your input is empty.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

And the same code in vanilla JavaScript solution:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

This solution does use ES6 but it's not necessary here. Just replace let with var and the arrow function with a regular function.

12
  • 7
    Well, it might be useful to still call the function even if the input is empty. What if you want to clear some search results (for example) when the input is blank again?
    – rvighne
    Commented Feb 5, 2014 at 3:01
  • 7
    I think we should also consider the condition where the user simply pastes come string inside the field . Commented Aug 1, 2014 at 9:49
  • 16
    use $('#myInput').on('input', function() { if you want this to work with copy and paste. I don't see the point of the check if input is empty. Supposing he wants to erase what he typed this will fail to make the ajax call. Commented Oct 6, 2014 at 5:07
  • 5
    Why not use $(this).val()?
    – JoelFan
    Commented Feb 26, 2015 at 23:20
  • 5
    for me it calls the function immediately :/ not after the 5 seconds, i've tried increasing the time, but the same thing happens
    – Xsmael
    Commented May 8, 2018 at 23:46
89

It's just one line with underscore.js debounce function:

$('#my-input-box').keyup(_.debounce(doSomething , 500));

This basically says doSomething 500 milliseconds after I stop typing.

For more info: http://underscorejs.org/#debounce

7
  • 7
    Seems to be available for jQuery, too: code.google.com/p/jquery-debounce and github.com/diaspora/jquery-debounce
    – koppor
    Commented May 2, 2013 at 11:37
  • 118
    It amazes me how people tout "ONE LINE OF CODE" as being critically important. Great. ONE LINE of code that requires a 1.1k JS file to load. I am not downvoting this because is a solution. But the one line bold thing irks me as well as leading to bloat code.
    – Wolfie
    Commented May 20, 2016 at 16:17
  • 9
    @Wolfie, I agree with you about code bloat but Underscore and Lodash are the top two depended-upon utilities at NPM so this may be a one-line solution for many people.
    – Paul
    Commented May 28, 2016 at 20:17
  • 3
    @Paul I agree that if you are loading the libraries for other purposes, its fine and actually beneficial to use common code. But to load over a K of code for the purpose of one line isn't efficient. Especially with mobile platforms becoming less and less unlimited data. And many Euro areas also pay for internet by the data. So its good to pay attention to bloat when reasonable to do so.
    – Wolfie
    Commented Jun 3, 2016 at 16:19
  • 5
    You can just get the debouce() function, npmjs.com/package/debounce if that's all you need. Works pretty well.
    – darelf
    Commented Mar 15, 2018 at 15:28
85

Late answer but I'm adding it because it's 2019 and this is entirely achievable using pretty ES6, no third party libraries, and I find most of the highly rated answers are bulky and weighed down with too many variables.

Elegant solution taken from this excellent blog post.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(function () { callback.apply(this, args); }, wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))
4
  • 9
    This really should be the top answer given the year
    – Dark Hippo
    Commented May 28, 2020 at 6:52
  • 1
    Edited to further remove unneeded variables - can get around having to encapsulate this by passing in a normal instead of arrow function to setTimeout()
    – GrayedFox
    Commented Jul 30, 2020 at 13:46
  • how would I get the event inside the event handler function?
    – Beginner
    Commented Jan 27, 2021 at 13:08
  • 1
    Why does this not work outside of an event listener? e.g. if I run debounce(() => {alert("test")}, 1000), and I do not run it again within 1000ms, shouldn't it run the callback and alert test? Commented Sep 23, 2021 at 22:46
48

Yes, you can set a timeout of say 2 seconds on each and every key up event which will fire an ajax request. You can also store the XHR method and abort it on subsequent key press events so that you save bandwith even more. Here's something I've written for an autocomplete script of mine.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

Hope this helps,

Marko

3
  • 1
    I would not recommend this. The code triggers an API request each time a key is pressed. Then it cancels the request if another key is pressed. Even though this solution prevents the AJAX callback to be triggered while the user types, it will still hammer the server with requests.
    – lxg
    Commented Mar 27, 2017 at 12:31
  • Ixg, no this won't. The clearTimeout function he uses clears the previous Timeout events, therefor invoking the API call. Commented Mar 30, 2018 at 18:00
  • @JohnSmith, i disagree it's probably better to first clear the timer, then check if xhr is empty or whatever your condition might be and finally run the timer with the ajax call
    – luukvhoudt
    Commented May 11, 2018 at 18:51
22
var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

full example here: http://jsfiddle.net/ZYXp4/8/

1
  • This worked for me, though keep in mind that when the user tabs-out of the text box you won't get a keyup event as it has lost focus by that point. Setting it to keydown instead seems to solve the problem.
    – horatius83
    Commented Sep 27, 2013 at 19:51
17

Both top 2 answers doesn't work for me. So, here is my solution:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});
0
14

Modifying the accepted answer to handle additional cases such as paste:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}
14

Declare the following delay function:

var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})()

and then use it:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    
3
  • 1
    Your solution is fantastic, bro!
    – NoWar
    Commented Apr 24, 2019 at 7:22
  • 1
    @Developer Thanks a lot. I've also added another answer to solve a bit more complex scenario (multiple controls per page). Commented Apr 26, 2019 at 6:20
  • good solution. Im using this but instead of keydown im using the 'input' event
    – Budyn
    Commented Aug 21, 2019 at 12:37
11

I like Surreal Dream's answer but I found that my "doneTyping" function would fire for every keypress, i.e. if you type "Hello" really quickly; instead of firing just once when you stop typing, the function would fire 5 times.

The problem was that the javascript setTimeout function doesn't appear to overwrite or kill the any old timeouts that have been set, but if you do it yourself it works! So I just added a clearTimeout call just before the setTimeout if the typingTimer is set. See below:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

N.B. I would have liked to have just added this as a comment to Surreal Dream's answer but I'm a new user and don't have enough reputation. Sorry!

9

const inText = document.getElementById('inText')
const outText = document.getElementById('outText')
const delay = 1000

let timer
inText.addEventListener('input', code => {
  clearTimeout(timer);
  timer = setTimeout(x => {
    outText.innerHTML = inText.value
  }, delay, code)
})
<textarea id='inText'>edit this and...</textarea>
<pre id='outText'>see the results after you stop typing for one second</pre>

1
  • 1
    Perfect! Nice job which works as expected Commented Mar 27 at 6:51
6

I don't think keyDown event is necessary in this case (please tell me why if I'm wrong). In my (non-jquery) script similar solution looks like that:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

It's my first reply on Stack Overflow, so I hope this helps someone, someday:)

4

Well, strictly speaking no, as the computer cannot guess when the user has finished typing. You could of course fire a timer on key up, and reset it on every subsequent key up. If the timer expires, the user hasn't typed for the timer duration - you could call that "finished typing".

If you expect users to make pauses while typing, there's no way to know when they are done.

(Unless of course you can tell from the data when they are done)

4

agree with the @going 's answer. Another similar solution that worked for me is the one below. The only difference is that I am using .on("input"...) instead of keyup. This only captures changes in the input. other keys like Ctrl, Shift etc. are ignored

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});
4

I was implementing the search at my listing and needed it to be ajax based. That means that on every key change, searched results should be updated and displayed. This results in so many ajax calls sent to server, which is not a good thing.

After some working, I made an approach to ping the server when the user stops typing.

This solution worked for me:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

You will notice that there is no need to use any timer while implementing this.

3

I feel like the solution is somewhat a bit simpler with the input event:

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}
3

I just figured out a simple code to wait for user to finish typing:

step 1.set time out to null then clear the current timeout when the user is typing.

step 2.trigger clear timeout to the variable define before keyup event is triggered.

step 3.define timeout to the variable declared above;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

javascript code

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};
1
  • 1
    the question is already answered... and it is pretty similar to this
    – Mixone
    Commented Jan 13, 2018 at 16:37
2

This is the a simple JS code I wrote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>
2

Multiple timers per page

All the other answers only work for one control (my other answer included). If you have multiple controls per page (e.g. in a shopping cart) only the last control where the user typed something will get called. In my case this is certainly not the wished behaviour - each control should have its own timer.

To solve this, you simply have to pass an ID to the function and maintain a timeoutHandles dictionary as in the following code:

Function Declaration:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

Function Usage:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);
2

Here is a solution that fires after 1 second of not typing, but also fires instantly when the input is blank. This is useful when clearing search results after the user deletes the input query. This solution also supports copying and pasting into the search box. The $(() => { ... }); wrapping the top portion of code simply means "do this when the page is loaded" in simple Jquery terms.

var searchTimer;
var searchInterval = 1000;

$(() => {
    $('#search-box').on('input', (event) => {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => {
            searchContacts(event.target.value);
        }, (event.target.value.length > 0) ? searchInterval : 0);
    });
});

function searchContacts(val) {
    console.log('searching: ' + val);
}
1

You can use the onblur event to detect when the textbox loses focus: https://developer.mozilla.org/en/DOM/element.onblur

That's not the same as "stops typing", if you care about the case where the user types a bunch of stuff and then sits there with the textbox still focused.

For that I would suggest tying a setTimeout to the onclick event, and assuming that after x amount of time with no keystrokes, the user has stopped typing.

1

If there is necessity for the user to move away from the field, we can use "onBlur" instead of Onchange in Javascript

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

If that is not necessary setting timer would be the good option.

1

I needed mine to run for a specific control and this worked for me :

function debounce(func, timeout) {
            let timer;
            return (...args) => {
                clearTimeout(timer);
                timer = setTimeout(() => { func.apply(this, args); }, timeout);
            };
        }

$('#txtFilterClientCode').keyup(debounce(function () {
            console.log("Test");
        }, 1000));
1

for alpine.js users <input @input.debounce.500ms="fn()">

0

Once you detect focus on the text box, on key up do a timeout check, and reset it each time it's triggered.

When the timeout completes, do your ajax request.

0

If you are looking for a specific length (such as a zipcode field):

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });
1
  • Not a bad idea to do limited validation prior to sending the ajax request.
    – chim
    Commented Oct 12, 2015 at 9:19
0

Not sure if my needs are just kind of weird, but I needed something similar to this and this is what I ended up using:

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

Which allows me to have elements like this in my application:

<input type="text" data-url="/controller/action/" class="update">

Which get updated when the user is "done typing" (no action for 2 seconds) or goes to another field (blurs out of the element)

0

If you need wait until user is finished with typing use simple this:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

Complete Example with ajax call - this working for my pager - count of item per list:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    
0

Simple and easy to understand.

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});
0

For passing parameters to your function along with ES6 syntax.

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.