单击退格键 jQuery 过滤器不起作用

on Click of Backspace Button jQuery Filter is not working

本文关键字：过滤器不起作用 jQuery 单击更新时间：2023-09-26

演示在这里

大家好我已经开发了一个基于 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>

您要执行的操作：

"显示或隐藏每个<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 轻松完成的简单子字符串匹配，请避免使用它。