javascript - 使用哪个事件进行搜索输入

Question

我有一个搜索字段，它收集查询并使用 AJAX 请求执行搜索。我无法找到用于执行搜索的完美 JavaScript 事件。

输入时 使用 oninput，AJAX 请求会被多次触发，每次针对输入字段中的每个字符。因此搜索“123”将执行三个 AJAX 请求:

1. '1'
2. '12'
3. '123'

onchange 使用 onchange 更有效，因为它只触发单个 AJAX 请求，但它强制用户从搜索字段更改焦点才能触发。

是否有一个 JavaScript 事件可以让我两全其美？我在搜索时使用 1.5 秒的超时延迟，以便为用户提供足够的时间输入搜索查询。理想情况下，我想使用像 oninput 这样的 JS 事件，该事件无需字段失去焦点即可触发，但仅针对整个值触发一次，而不是针对输入字段中的每个字符触发一次。

也许答案是使用 onchange 事件并在 1.5 秒后自动失去焦点？这看起来很老套，而且还引入了一个可用性问题，因为如果用户想要更改搜索查询，他们需要再次将焦点设置在搜索字段上。

Answer 1

这就是你可以做到的，消除 input 事件:

$('input[type=search]').on('input', function(){
   clearTimeout(this.delay);
   this.delay = setTimeout(function(){
      console.log(this.value);
      /* call ajax request here */
   }.bind(this), 800);
});

为了更好的 UIX，您也应该绑定(bind) search 事件:

$('input[type=search]').on('search', function(){
   if(this.value){
     /* call ajax request here */
   }
});

参见-DEMO-