Question

我正在进行现场ajax搜索领域。所以我们有：

^(?:...|...)$

我想在用户停止输入500ms后触发搜索。

我得到了这样的工作：

<input type="search" id="search">

问题是：如果用户持有 shift 键并将其释放，搜索将会触发。因此，不会添加新密钥并提交相同的搜索词。

我怎样才能使它只在添加/删除新角色时触发？

Answer 1

只需跟踪状态：

var currentSearch = "";

然后，每当密钥发生时，检查输入是否改变，如果没有停止更新：

if($("#search").val() === currentSearch) return;
//updated so:
currentSearch = $("#search").val();

旁注：由于DOM查找是时间密集的，您可以缓存$（＆＃34; #search＆＃34;）......

Answer 2

您应该使用input事件而不是keyup，只有当值发生变化时才会触发此事件。

$('#search').on('input', throttle(function(){
    // do ajax
}));

当<input>，<select>或<textarea>元素的值发生更改时，将同步触发DOM输入事件。（对于type = checkbox或type = radio的输入元素，当用户单击控件时，不会触发输入事件，因为value属性不会更改。）

但请注意，此事件在IE9 / 10/11中存在一些问题（以前的IE版本根本不支持）：

[2]当用户从输入中删除字符时（例如，通过按退格键或删除键，或使用＆＃34;剪切＆＃34;操作），IE 9不会触发输入事件。

[3] IE 10和11有一个bug，输入事件会触发占位符属性更改。

但IE10 / 11问题还不错，所以这取决于你是否需要支持IE9。

https://developer.mozilla.org/en-US/docs/Web/Events/input

编辑：遗憾的是change不是一个合适的解决方案，因为它只发生在blur之后（忽略了输入的焦点）。正确的解决方案是使用input事件。

Answer 3

您还可以使用keyup事件，并检查键码是否与您要操作的键匹配。请参阅this answer

根据您的情况调整答案：

$('#search').keyup(
    function(event) {
    var isWordCharacter = event.key.length === 1;
    var isBackspaceOrDelete = (event.keyCode == 8 || event.keyCode == 46);

    if (isWordCharacter || isBackspaceOrDelete) {
        (throttle(function(){
            // do ajax
        })))();
    }
})

仅在搜索字词更改时才进行去抖动搜索

3 个答案: