仅当搜索词更改时才反跳搜索[重复]

Question

我正在开发一个实时 ajax 搜索字段。所以我们有：

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

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

我是这样工作的：

function throttle(f, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = window.setTimeout(function(){
            f.apply(context, args);
        },
        delay || 500);
    };
}

$('#search').keyup(throttle(function(){
    // do ajax
}));

问题是：如果用户按住shift键并松开它，搜索就会触发。因此没有添加新键，并且提交了相同的搜索词。

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

Answer 1

只需跟踪状态：

var currentSearch = "";

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

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

旁注：由于 DOM 查找是时间密集型的，您可以缓存 $("#search") ...

Answer 2

您还可以使用 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
        })))();
    }
})

Answer 3

您应该使用input 事件而不是keyup，它只会在值发生变化时触发。

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

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

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

[2] 当用户从输入中删除字符时（例如，通过按 Backspace 或 Delete，或使用“剪切”操作），IE 9 不会触发输入事件。

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

不过IE10/11的问题还好，看你是否需要支持IE9。

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

编辑：不幸的是，change 不是一个合适的解决方案，因为它仅在blur 之后发生（失去输入的焦点）。正确的解决方案是使用input事件。