javascript - 根据 search.keypress(过滤器)显示/隐藏 div

Question

我有一个包含很多“卡片”的网页，我想在我输入搜索字段时过滤掉一些卡片，当我删除一个字符时，再次显示它们(全部为空时)。

我的问题是它似乎不能正常工作，它是我写的“落后 1 个字符”，当我删除字符时它也不显示卡片。

当我最终写下整个标准时它也不会工作，当我遗漏一些字母时它会找到 3-4 张卡片。

这是我在 atm 上的密码:

$('#search').keypress(function(){
        $( ".champion" ).each(function( index ) {
            if ( $( this ).find('.name-tag').text().toLowerCase().indexOf($('#search').val().toLowerCase(), 0) == -1) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });

我也尝试过交换它:

$('#search').keypress(function(){
    $( ".champion" ).each(function( index ) {
        if ( $('#search').val().toLowerCase().indexOf($( this ).find('.name-tag').text().toLowerCase()) == -1) {
            $(this).css('opacity', '0.7');
        } else {
            $(this).css('opacity', '1');
        }
    });
});

Answer 1

这可以通过将事件延迟大约 10 毫秒来实现，用户不会注意到差异，但它会帮助您。

我做了一个fiddle对于你的问题。

这是它的主要作用:

$(function () {

    var input = $("#entry");
    input.keydown(function () {
        // doesn't matter if you create an anonymous method or a regular method, only the setTimeout is of value

        setTimeout(function () {
            var s = $("#show");
            s.text(input.val());            
        }, 10);

    });
});

你的第二个问题是基于似乎没有捕获退格键的按键事件。您最好使用 keydown 事件处理程序，因为它会捕获每个键。