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();
        });
    };
});

*"if I remove input using "ctrl + a""* `CTRL+A` doesn't remove input. — Scott Marcus, Dec 19 '16 at 20:55
Not that it should matter in this case... but why not use the `input` event rather than `keyup`, I wonder? — canon, Dec 19 '16 at 20:58
Try registering the `.on('input', ..` event. See this example here : http://stackoverflow.com/a/15706843/3504007 — Kraang Prime, Dec 19 '16 at 21:01

score 1 · Answer 1 · answered Dec 19 '16 at 20:58

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">

answered Dec 19 '16 at 20:58

Scott Marcus

64,069
6
49
71

Weird, it is really working. Is it possible that it is because I use materializecss input field? I see that console shows input is not empty but it doesn't go back. It doesn't show all divs again. – Tarvo Mäesepp Dec 19 '16 at 20:59
I am not familiar with that type of input, but it is certainly possible that it only triggers the even when a printable character is pressed. – Scott Marcus Dec 19 '16 at 21:01
Also, `.keyup` isn't the best event to register against if you wish to detect change in a timely manner. – Kraang Prime Dec 19 '16 at 21:04

Michael Geary · Accepted Answer · 2016-12-19T21:54:44.353

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.

You are absolutely right. I actually didn't saw your comment before. But what is the difference between `.length == 0` and `val == " "`? — Tarvo Mäesepp, Dec 19 '16 at 21:44
I don't see `val == " "` in the code, but that would test whether `val` is a string consisting of a single space character. If you're asking about `val == ""`, that would be essentially the same thing as `val.length == 0`, assuming `val` is a string. — Michael Geary, Dec 19 '16 at 21:48
Okay, thank you for clearing this up, I just started the Jquery and javascript language and there are so many ways declare things. — Tarvo Mäesepp, Dec 19 '16 at 21:49
Well you're off to a great start! :-) See the note I added to the answer about the browser's debugging tools. They will really help you track down problems like this. — Michael Geary, Dec 19 '16 at 21:56

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

2 Answers2