使用 .keypress 过滤数据 - 无插件

Question

我正在尝试使用 .keypress 过滤数据。我目前的方法是从 .keypress 捕获数据并传递给我的过滤函数。我成功地 returning 了以字母开头的数据。因此，如果我在我的字段中输入 A，它将 return 所有以 A 开头的猫。我想通过输入更多字母来缩小我的搜索范围，并让它每次都更新。这里有一个简单的解决方案吗？这是代码

// 从按键检索数据

$("input").keypress(function (e) {
                if (e.which !== 0 && e.charCode !== 0) {
                    var criteria = String.fromCharCode(e.keyCode|e.charCode);
                }
                $.getJSON('cats.json', function(cats) {
                    filterCats(cats, criteria);
                });
            });

//过滤函数

            function filterCats(cats, criteria){
            $.getJSON('cats.json', function(cats) {
                //var filteredData = cats.filter(function(c){return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) !== -1;});   
                var filteredData = cats.filter(function(c){return c.breed.toUpperCase().indexOf(criteria.toUpperCase()) === 0 ;});    
                renderData(filteredData);
            });
        }

Answer 1

正如安迪在评论中指出的那样，您需要使用输入的值，因为您目前正在查看每个字符输入时的单个字符。正如 Hossein Shahsahebi 指出的那样，keyup 对于您想要做的事情来说是一个更准确的事件。另外，不要忘记粘贴，这应该会触发相同的逻辑。

我想补充一点，我认为在每个字符输入时都进行搜索是不可取的。想象一下有人打字非常快。您将向服务器发送大量请求。我宁愿等一会儿再做搜索。当事件被触发时，将当前时间存储在一个变量中，并使用setTimeout等待一秒钟左右，然后再调用filterCatsfunction。每当事件运行时，将该变量覆盖为当前时刻。当执行 filterCats 时，检查变量的值是否足够旧。如果没有，return 不过滤。如果是这样，请进行过滤。由于此功能，这将大大减少服务器负载。

Answer 2

正如其他人提到的，keyup 更好，因为它在释放键后触发。

keydown

Fires when the user depresses a key. It repeats while the user keeps the key depressed.

keypress

Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.

keyup

Fires when the user releases a key, after the default action of that key has been performed.

以上来自http://www.quirksmode.org/dom/events/keys.html

另外，正如其他答案所述，运行您在每次按键后立即执行的代码可能会导致向服务器发送大量请求。

相反，尝试使用超时来限制它。

var timeout, criteria;
$('input').keyup(function(e) {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        criteria = this.value;
        $.getJSON('cats.json', function(cats) {
            filterCats(cats, criteria);
        });
    }.bind(this), 125);
});

使用 .keypress 过滤数据 - 无插件

filtering data using .keypress - no plugins

javascript

jquery

filtering