javascript - 单击 Backspace 按钮时 jQuery 过滤器不起作用

Question

<强> DEMO HERE

大家好， 我开发了一个基于 JSON 数据的过滤，当我在文本框中输入时工作正常(搜索完美)，但是当我按下后退按钮(e.keyCode == 8)时我正在重置所有数据。

• 场景:

  如果用户输入了 (J)，则显示 2 个结果，这是预期的，如果用户想通过按后退按钮通过其他单词更改名称，则只需显示 2 个结果，而不是所有数据。

JS:

$(function(){
            var data = {
                "users": [
                            {
                                "id"        : 01,
                                "docName"   : "Dwayne Johnson",
                                "docCat"    : "Neurologist",
                                "docPic"    : "url('../images/01.png')"
                            },
                            {
                                "id"        : 02,
                                "docName"   : "Vin Diesel",
                                "docCat"    : "Skin Specialist",
                                "docPic"    : "url('../images/02.png')"
                            },
                            {
                                "id"        : 03,
                                "docName"   : "Paul Walker",
                                "docCat"    : "Specialist",
                                "docPic"    : "url('../images/03.png')"
                            },
                            {
                                "id"        : 04,
                                "docName"   : "Jason Statham",
                                "docCat"    : "Actor",
                                "docPic"    : "url('../images/01.png')"
                            },
                            {
                                "id"        : 05,
                                "docName"   : "Michelle Rodriguez",
                                "docCat"    : "Actress",
                                "docPic"    : "url('../images/01.png')"
                            }
                        ]
            }

            $(data.users).each(function () {
                var output = 
                    "<li>" + 
                        this.docName + " / " + 
                        this.docCat + " / " + 
                        this.docPic
                    "</li>";
                $('#placeholder ul').append(output);
            });

            $('#search-doctor').keyup(function () {
                var doctorVal = $(this).val();
                if (doctorVal.length > 0) {
                    var filterDoctor = 
                        $("li").filter(function () {
                            var str = $(this).text();
                            var re = new RegExp(doctorVal, "i");
                            var result = re.test(str);
                            if (!result) {
                                return $(this);
                            }
                    }).hide();
                    $(this).keyup(function(e){
                        if(e.keyCode == 8) {
                            $("li").show();
                        }
                    })
                } 
                else {
                    $("li").show();
                }
            });
        })

html:

<input type="search" name="search" id="search-doctor" value="" />
    <div id="placeholder"><ul></ul></div>

Answer 1

你想做什么:

“显示或隐藏每个 <li> ，具体取决于它们的文本是否与输入值匹配。”

让我们把它写下来:

$("#placeholder li").each(function () {
    var isMatch = $(this).text().toUpperCase().indexOf(searchStr) > -1;
    $(this)[isMatch ? "show" : "hide"]();
});

或者，在上下文中(展开要运行的代码片段):

var data = {
    "users": [
        {
            "id"        : 01,
            "docName"   : "Dwayne Johnson",
            "docCat"    : "Neurologist",
            "docPic"    : "url('../images/01.png')"
        },
        {
            "id"        : 02,
            "docName"   : "Vin Diesel",
            "docCat"    : "Skin Specialist",
            "docPic"    : "url('../images/02.png')"
        },
        {
            "id"        : 03,
            "docName"   : "Paul Walker",
            "docCat"    : "Specialist",
            "docPic"    : "url('../images/03.png')"
        },
        {
            "id"        : 04,
            "docName"   : "Jason Statham",
            "docCat"    : "Actor",
            "docPic"    : "url('../images/01.png')"
        },
        {
            "id"        : 05,
            "docName"   : "Michelle Rodriguez",
            "docCat"    : "Actress",
            "docPic"    : "url('../images/01.png')"
        }
    ]
};

$(function(){
    $.each(data.users, function (i, user) {
        var str = [user.docName, user.docCat, user.docPic].join('/');
        $("<li>", {text: str}).appendTo('#placeholder ul');
    });

    $('#search-doctor').keyup(function () {
        var searchStr = $(this).val().toUpperCase();
        
        $("#placeholder li").each(function () {
            var isMatch = $(this).text().toUpperCase().indexOf(searchStr) > -1;
            $(this)[isMatch ? "show" : "hide"]();
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="search" name="search" id="search-doctor" value="" />
<div id="placeholder"><ul></ul></div>

注释:

• 永远不要将事件处理程序嵌套在其他事件处理程序中，就像 keyup 那样。 。如果您按 10 个键，您的代码将创建 10 个新的 keyup 处理程序，这当然不是您想要的。
• 使用正则表达式进行模式搜索。对于简单的子字符串匹配，请避免使用它，这可以通过indexOf轻松完成。 .