哪个事件用于搜索输入

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

oninput 使用oninput，AJAX请求被触发多次，一旦在输入字段中的每个字符。因此搜索 '123' 将执行三个AJAX请求：

'1'
'12'
'123'

平变化 使用平变化是在更高效它只会触发一个AJAX请求，但它会强制用户从搜索字段更改焦点以触发。

是否有一个JavaScript事件，我可以使用两全其美？我在搜索时使用了1.5秒的超时延迟，以便用户有足够的时间输入搜索查询。理想情况下，我想使用一个类似于的JS事件，输入，不需要该字段失去焦点就会触发，但只对整个值触发一次，而不是输入字段中的每个字符触发一次。

也许答案是使用onchange事件并在1.5秒后自动失去焦点？这看起来很诡异，同时也引入了一个可用性问题，因为如果用户想要更改搜索查询，他们需要重新设置搜索字段的焦点。

来源

2016-05-30 Jeff Walden

您应该使用此处理程序中的超时来反弹输入事件 –

我们使用https://github.com/AOEpeople/deferred-event-callback进行去除，您可能需要试一试。 –

你应该使用'keypress'事件，看看这个答案关于“debouncing”与池ajax请求=> http://stackoverflow.com/questions/37105255/how-to-resolve-race-conditions-on-debounced -user-input/37154887＃37154887 –

这是你如何能做到这一点，去抖动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-

来源

2016-05-30 14:18:01

我会当用户点击输入时，建议运行一个电话。当你写完单词时，点击输入似乎很自然。

当用户点击进入一些数据到searchBox后，该代码运行doYourStuff（）。

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

如果你不喜欢，你可以始终与一些奇特的搜索图标添加一个小按钮，并调用运行，当用户点击这个按钮的解决方案。

来源

2016-05-30 14:23:17 Marta

哪个事件用于搜索输入

回答

相关问题