Input is not detecting that it is empty if removing text with “ctrl + a + backspace”

Question

I am doing some easy div filtering with jQuery and input field. It is working, however it is not detecting that it is empty if I remove input using " Ctrl + a + backspace ", in other words if I select all text and remove it. What causes this?

It is not reordering divs back to default if using the keyboard commands but is going back to normal if you backspace every character.

This is how I do it:

$('#brandSearch').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis.length == 0) {
        $('.card').show();
    } else {
        $('.card').each(function() {
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
        });
    };
});

Answer 1

It seems to be working just fine:

 $('#brandSearch').keyup(function() { var valThis = $(this).val().toLowerCase(); if (valThis.length == 0) { $('.card').show(); console.log("input is empty"); } else { console.log("input is not empty"); $('.card').each(function() { var text = $(this).text().toLowerCase(); (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide(); }); }; }); 

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

Answer 2

Your if block that handles the empty string is not showing the same elements that the else block hides. The else block calls .parent() but the if block does not.

So the else case shows or hides the parent of each .card element, but the if case shows the .card elements themselves— without unhiding their parents . See my comments added to the code (I also reformatted the conditional expression in the else for clarity):

$('#brandSearch').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis.length == 0) {
        // Show all of the .card elements
        $('.card').show();
    } else {
        $('.card').each(function() {
            var text = $(this).text().toLowerCase();
            // Show or hide the *parent* of this .card element
            text.indexOf(valThis) >= 0 ?
                $(this).parent().show() :
                $(this).parent().hide();
        });
    };
});

Since it sounds like the non-empty-string case is working correctly, it should just be a matter of adding .parent() in the if block so it matches the others:

$('#brandSearch').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis.length == 0) {
        // Show the parent of each .card element
        $('.card').parent().show();
    } else {
        // Show or hide the parent of each .card element
        $('.card').each(function() {
            var text = $(this).text().toLowerCase();
            text.indexOf(valThis) >= 0 ?
                $(this).parent().show() :
                $(this).parent().hide();
        });
    };
});

This is the kind of situation where familiarity with your browser's debugging tools would pay off big time. The .show() or .hide() methods manipulate the DOM, and by using the DOM inspector you could easily see which elements are being hidden and shown.

In fact, as a learning exercise I recommend un-fixing the bug temporarily by going back to your original code, and then open the DOM inspector and see how it reveals the problem. While you're there, also try out the JavaScript debugger and other tools.

If you use Chrome, here's an introduction to the Chrome Developer Tools . Other browsers have similar tools and documentation for them.