How can I stop fast typing from causing my jQuery input event to not always get the last value input?

Question

I have a JavaScript searchbox/filter on my page:

$("#show_search").on("keyup search input paste cut", function() {
    send_data["search"] = this.value;
    getAPIData();
});

It filters the results I show on the page based on the search term put into the input box. But sometimes, usually when I type a search term very quickly, it doesn't capture the final state of the input text and instead picks up an earlier state.

So, for example, if I search for "miranda", my ajax calls look like this:

[23/Oct/2020 16:12:51] "GET /api/shows/?year=&show_type=&sort_by=name&search=mir&format=json HTTP/1.1" 200 2486
[23/Oct/2020 16:12:51] "GET /api/shows/?year=&show_type=&sort_by=name&search=mira&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:51] "GET /api/shows/?year=&show_type=&sort_by=name&search=mir&format=json HTTP/1.1" 200 2486
[23/Oct/2020 16:12:51] "GET /api/shows/?year=&show_type=&sort_by=name&search=miran&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=mira&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=mirand&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=miranda&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=miran&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=mir&format=json HTTP/1.1" 200 2486
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=miranda&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=mirand&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=miranda&format=json HTTP/1.1" 200 1705
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=mi&format=json HTTP/1.1" 200 40981
[23/Oct/2020 16:12:52] "GET /api/shows/?year=&show_type=&sort_by=name&search=m&format=json HTTP/1.1" 200 41785

You can see that the full search-term does show in that list, but it ends on filtering on "m" when "miranda" is in the search box, which is nowhere close to what I want. What gives? How can I ensure that the current input value will always be extracted from this.value and stored in send_data["search"]?

The reason is that AJAX is asynchronous. There's no guarantee that the responses will arrive in the same order that the requests are sent. — Barmar, Oct 23 '20 at 20:18
searching for "m" takes a whole lot longer than searching for "miranda" — Kevin B, Oct 23 '20 at 20:22

score 2 · Accepted Answer · answered Oct 23 '20 at 20:30

You need to 'debounce' the search with a timeout like so:

var searchTimeout = null;

$("#show_search").on("keyup search input paste cut", function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        send_data["search"] = this.value;
        getAPIData();
    }, 200);
});

Feel free to change the 200 to however long you feel is appropriate. It will wait however long you set before actually running the code in the timeout. It will also clear any previously set timeouts so only one is executed.

score 1 · Answer 2 · answered Oct 23 '20 at 20:33

You could wait for n seconds (probably milliseconds) before sending your request to see if a new letter is typed

let timeout;
$("#show_search").on("keyup search input paste cut", function() {
  // if a new letter is typed within 400ms the previous request is canceled
  clearTimeout(timeout);
  setTimeout(_ => {
    send_data["search"] = this.value;
    getAPIData();
  }, 400);
});

How can I stop fast typing from causing my jQuery input event to not always get the last value input?

2 Answers2