客户端搜索文本更改-何时发送请求？

Question

I have a search engine for an entity, and it has many filters. I am required to update the search results when the filters change. Some filters are selected from dropdowns, others are text inputs. What is the correct way to implement search on change, when the change can happen frequently as the user types?

Here are some possibilities:

• When the input loses focus. The problem: the user might type away some text and wait for the search to work, but it won't.
• On each keystroke. The problem is I'll flood the server with requests.

• Wait x milliseconds after the last change in the input and then send the request. The problem is the search might become slow for the user.

  What is the best approach?

Answer 1

You can either do keydown or keyup for inputs. If it's a dropdown menu you can use onchange.

Personally, I would recommend adding a minimum character limit so you're not hammering your resources.

For example

var foo = document.querySelector("#inputElement");
// Change your event listener to what you need.
foo.addEventListener("keyup", doSomeStuff);
function doSomeStuff(e){
    var input = e.value;
    // Rest of your function
}

You can learn about event listeners here