Fire HTML input-event only once when more than one character is typed

user_9598138 0
Viewed 213

I'm creating an input field where some data should be fetched (by AJAX) and displayed every time the user enters data into that field. However, if the user types several characters, say he types "test" to get all records who contain the string "test", it would not be necessary to do 4 queries after every character pressed, but one query after he stopped typing. I can think of several solutions with a global variable where I check if the same event has been fired again, but is there a really elegant way to do this? Maybe check if there is something in the keyboard buffer and only proceed if it is empty? Or is there an event that is only fired once the keyboard buffer is empty and all characters are in the input field?

event-handling input html javascript
2 Answers

The elegant way is to use a timeout, and to keep clearing the previous timeout with each key press

var tID;

function keyUp (e) {
  if (tID) clearTimeout(tID);
  tID = setTimeout(function() {
    ... // make web call
  }, 2000);
}

This will ensure that the web call is only called after the last key is pressed (you may want to adjust the timeout value)

user_12914920

There are ways to achieve this that I can think of:

  1. Use timeout, from the last keyup event. This is not always the best and not that precise with users that have low typing speed.
  2. Use space character do regconize if the user has finished typing a word. Based on changes in length and total word count, you can decide if you would want to send AJAX or not.

Depends on the type of input you are working with, you may choose the most suitable method for you. The first one is somewhat quite rigid. The second method requires user to press space every time he finishs typing. A little bit of both could be a sweet spot perhaps. In modern day, I don't think sending request every keyup will cause huge performance effect though.

user_124535620
Related