CODEWITHSUNDEEP
javascriptjquery
avocado
avocado

Reputation: 2735

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

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.

Upvotes: 3

Views: 283

Answers (4)

jeprubio
jeprubio

Reputation: 18002

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">

Upvotes: 3

Arnab_Datta
Arnab_Datta

Reputation: 662

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>

Upvotes: 0

Amir
Amir

Reputation: 1905

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" />

Upvotes: 1

Evik Ghazarian
Evik Ghazarian

Reputation: 1791

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">

Upvotes: 1

Related Questions