Javascript 仅当搜索项发生更改时，才取消对搜索的影响

我正在开发一个实时ajax搜索字段。因此，我们：

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

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

---

如何使其仅在添加/删除新角色时触发

您应该使用

输入

事件，而不是

键控

，只有当值发生变化时才会触发该事件

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

当

、

或

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

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

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

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

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

---

编辑：不幸的是，

change

不是一个合适的解决方案，因为它只在

blur

（失去输入焦点）之后发生。正确的解决方案是使用

输入
事件。
只需跟踪状态：

var currentSearch = "";

然后，每当发生键控时，检查输入是否已更改，如果未更改，则停止更新：

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

旁注：由于DOM查找是时间密集型的，您可以缓存$（“#search”）…
您还可以使用keyup事件，并检查keycode是否与要对其执行操作的键匹配。请参阅

根据您的情况调整答案：

$('#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
        })))();
    }
})

用
change
事件而不是
keyup
怎么样？@MartinAdámek你能给出答案吗？没有意义。为什么您需要限制一个变更事件？这显然不是OP想要的行为，
input（）
是比Jonas发布的更好的方法吗？谢谢你的回答。你是对的，我认为
change
事件会在每次更改时触发<代码>输入
事件是要使用的事件。@HenrikPetterson请确保检查链接引用页上的浏览器兼容性表。看起来IE在这方面有一些怪癖（令人惊讶！）是的，它将添加一个关于浏览器兼容性的注释。幸运的是，在我的工作中，我不必再支持IE9:]只是测试你的代码。你的答案比另一个更好吗？@henrik从绩效的角度来看，它可能并不更好，但我认为这种差异是无法衡量的。但是它允许更多的定制…你能详细说明一下
cache$（“#search”）…
--我需要做什么步骤来完成这一点吗？@henrik do
var search=$（“#search”）
在上面的范围内，然后使用
search.val（）
…我不会为缓存
id
选择器而烦恼，因为它们性能非常好。该调用被转换为
document.getElementById
call。
$('#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
        })))();
    }
})