How to detect `input` value changes as user typing in?

Question

What I want to do is that, there is an input box, when user types in any thing, the code should fire a request to the server and get back some data to users.

This is just a typeahead suggestion functionality, but still not exactly the same.

What I currently have is following code

 $("input").on("input", function(ev) { alert(`${ev.type} event detected`) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" placeholder="text">

And the code works as expected, that is saying whenever the input box value changes, the event is captured.

My question is, how to make the code wait a few seconds or milli-seconds before handling the input change events? Say fire the code 1000ms later when the input stops changing.

Since now, the code will fire per every single letter I typed in, that would results into a lots of events, which I don't want.

Answer 1

You can set a timer when a key is pressed and if another key is pressed and the timer is still running (timer var is not null) cancel it before setting the timer again.

 var timer; $("input").on("input", function(ev) { if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function(){ console.log(`${ev.type} event detected`); timer = null; }, 1000); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" placeholder="text">

Answer 2

Here is a sample code to execute 1 seconds after done typing.

Basically what it does. it's simply setting a setTimeout if a key is pressed then clearingTimeout if another key is pressed before 1000ms. If not, setTimeout will execute.

 var typingTimer; var doneTypingInterval = 1000; $("input[type='text']").on('input', function(e) { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); }); function doneTyping() { alert("Hey;"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" placeholder="text">

Answer 3

All you need to do, is to set a timeout and a flag. with each event, you set the flag to true, but when the timeout occurs, you only run your code once and then reset the flag for later events.

 $("input").on("input", function(ev) { $(this).data({ changed: true }); window.setTimeout(() => { if ($(this).data("changed") == true) { alert(`${ev.type} event detected`); $(this).data({ changed: false }); } }, 1000); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" placeholder="text" />

Answer 4

To detect input value changes as user typing in, You just have to check onInput event -

 $('#testId').on("input", function (e) { var valInput = $('#testId').val(); $('#inputVal').html(valInput); $('#inputChar').html(valInput.length); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="testId" /> <br /> <br /> <div>You typed: <strong><span id="inputVal"></span></strong> </div> <br /> <div>No. of character: <strong><span id="inputChar">0</span></strong> </div>