On Click Of Backspace Button JQuery Filter Is Not Working

DEMO HERE hi all, i have developed an Filtration based on JSON Data, when i type in text box Works Fine (Searches Perfect), but when i press Back Button (e.keyCode == 8) Iam Reset

Solution 1:

What you are trying to do:

"Show or hide each <li>, depending on whether their text matches an input value."

Let's just write that down:

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

or, in context (expand code snippet to run):

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>

Notes:

• Never nest event handlers inside other event handlers, like you did with keyup. If you press 10 keys, your code will create 10 new keyup handlers, this is certainly not what you had in mind.
• Use regex for pattern searches. Avoid it for simple substring matches that can easily be accomplished by indexOf.