哪个事件用于搜索输入

Question

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

oninput使用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，您也应该绑定search事件：

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

参见-DEMO-

Answer 2

当用户单击Enter时，我建议您拨打电话。 完成写单词后，单击Enter似乎是很自然的事情。

当用户在searchBox中输入一些数据后，单击enter时，该代码将运行doYourStuff（）。

    $("#searchBox").keyup(function (event) {
        if (event.keyCode == 13) {
            doYourStuff();
        }

如果您不喜欢该解决方案，则总是可以在用户单击按钮时添加带有一些精美搜索图标的小按钮并运行呼叫。