Question

我正在尝试使用.keypress过滤数据。我目前的方法是从.keypress捕获数据并传递给我的过滤器函数。我成功地返回以字母开头的数据。因此，如果我在我的字段中键入A，它将返回所有以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

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

我想补充一点，我认为对每个字符条目进行搜索是不可取的。想象一下有人打得很快。您将向服务器发送大量请求。在进行搜索之前，我宁愿等待一段时间。触发事件时，将当前时间存储在变量中，并在调用setTimeout filterCats之前使用function等待一秒左右。每当事件运行时，将该变量覆盖到当前时刻。执行filterCats时，请检查变量的值是否足够大。如果没有，请返回而不过滤。如果是，请进行过滤。这将大大减少因此功能导致的服务器负载。

Answer 2

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

<强> KEYDOWN

用户按下某个键时触发。当用户按下键时，它会重复。

<强>按键

插入实际字符时触发，例如文本输入。当用户按下键时，它会重复。

<强> KEYUP

在执行该键的默认操作后，用户释放密钥时触发。

高于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过滤数据 - 没有插件

2 个答案: