CODEWITHSUNDEEP
javascriptjqueryhtmlautocomplete
Michael Tong
Michael Tong

Reputation: 452

jQuery onchange event, how to ignore too frequently changes?

I want to implement an auto completion function on my text input, using jQuery by monitoring the change event and query my database on every change.

I know there are some autocompletion plugins but I'm doing something like fuzzy search, so keyword 'ad' may result in words like 'abort' or 'and'. Correct me if I'm wrong, I found most plugins do exact search.

However, I don't want to do database query too frequently, that is, I want to do query only when the text input is updated but haven't been updated for a small amount of time like 200ms. So that I can ignore the constantly high speed inputs by users.

Can anyone tell me how to do that?

Upvotes: 1

Views: 735

Answers (2)

Drey
Drey

Reputation: 130

Use setTimeout() stored as a variable, then on input clear the timeout and reset. If elapsed time is >= desired timeout, make DB query.

Working example here: https://jsfiddle.net/c2s1sj6f/7/

Upvotes: 2

mikrafizik
mikrafizik

Reputation: 349

You can use something like that to make queries.

var timeouted=null;
$(e).on('change',function(){
    clearTimeout(timeouted);
    timeouted = setTimeout(function(){
        //database query
    }, 200)
})

Upvotes: 2

Related Questions