哪个事件用于搜索输入答案

【问题标题】：Which event to use for search input哪个事件用于搜索输入
【发布时间】：2016-09-28 09:50:18
【问题描述】：

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

输入使用 oninput，AJAX 请求被触发多次，输入字段中的每个字符触发一次。所以搜索 '123' 会执行三个 AJAX 请求：

'1'
'12'
'123'

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

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

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

【问题讨论】：

您应该在此处理程序中使用超时来消除input 事件
我们正在使用github.com/AOEpeople/deferred-event-callback 进行去抖动，您可能想尝试一下。
您应该使用keypress 事件并查看有关使用池ajax 请求“去抖动”的答案=> stackoverflow.com/questions/37105255/…
我的超时示例不是和去抖输入事件一样吗？ pastebin.com/MetyrzqQ
@JeffWalden delayed_timeout !== timeout... 你使用clearTimeout(delayed_timeout); 但设置timeout = setTimeout(function() {...}, 1500);。打错字了

标签： javascript jquery ajax

【解决方案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-

【讨论】：

你能分享一下你为什么要绑定搜索吗？如果你绑定到两者，它会不会被击中两次，并且从我读到的搜索不是在所有浏览器上都可用，所以你不想只做搜索

【解决方案2】：

我建议在用户单击回车时运行呼叫。当你写完单词后点击回车似乎很自然。

当用户在 searchBox 输入一些数据后点击回车时，该代码运行 doYourStuff()。

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

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

【讨论】：