Jquery Filter (keyup bind.. the function) soo simple but it doesnt work

Question

This is Jquery code that is supposed to hide the li > a's that dont contain the matched value in the text input. Theres a function that checks the keyup of the input and it sees if the div(s)? matches the value.

It then SUPPOSED TO hides the ones that dont have the contained value inside of input.

<input type="text" id="targety" placeholder="Filter Items..." />
<ul id="ded">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>

</div>


<script>
$('#targety').bind('keyup', function() { 
if($("#targety").val() == ""){
$("#ded > li > a").show();
}else{

$("#ded > li > a:visible:not(:contains('"+$("#targety").val()+"')").hide("fast");
}

 } );
</script>

Beetroot-Beetroot · Answer 1 · 2012-05-02T02:42:50.383

I got it to work as follows:

$(function(){
    var $targety = $("#targety"),
        $anchors = $("#ded >li a");
    $targety.on('keyup', function() {
        var val = $targety.val();
        $anchors.show();
        if (val !== "") {
            var pattern = new RegExp('^' + val, 'i');
            $anchors.not(function(index) {
                return $(this).text().match(pattern);
            }).hide();
        }
    });
});

See fiddle

Notes:

Keyup handler efficiency is important. It's about is as efficient as I can make it. In particular, no jQuery objects are created within it.
RegExp could be avoided by using .toLowerCase() and .indexOf() instead. (And yes it's faster)
I ditched :visible, and hide("fast") in favour of hide() to make the code fully synchronous. Otherwise, speed of typing could (and most probably would) defeat the original logic.
Unconditional .show() allows elements to be re-shown as the input string is progressively deleted.

Edit:

Correction - .not() returns a new jQuery object so the last sentence of my first note is not correct. However, $anchors.not(...) will be more efficient than $(...), which will work from the whole DOM as its baseline.

Downvoter - without a reason, downvotes are as good as useless. — Beetroot-Beetroot, May 03 '12 at 17:40

score 0 · Answer 2 · answered May 02 '12 at 00:45

0

Looks like you're just missing a parentheses in your selector:

... :contains('" + $("#targety").val() + "'))") ...
                                            ^

Btw you can use this instead of "#targety" inside the callback.

answered May 02 '12 at 00:45

Explosion Pills

188,624
52
326
405

score 0 · Answer 3 · edited May 23 '17 at 12:27

One thing to note is that ":contains" is case sensitive You can find a function for working though that "future" issue here: https://stackoverflow.com/a/2196683/1220302

As for you code, I suggest you set a min length on your input box. Here is an example - which is a little verbose for learning. As you can see, I'm also hiding the "parent" "li" as well.

<script type="text/javascript">
    $(document).ready(function () {
        var $container = $("#ded"); //Set the container
        $('#targety').bind('keyup', function () {
            var value = $(this).val();
            if (value.length >= 3) {
                var filter = "> li a:visible:not(:contains('" + value + "'))";
                console.log("Found: " + $(filter).length); console.log(filter); //Debug logging - remove 
                $(filter, $container).hide("fast").parent().hide("fast"); //hide "a" and "li"
            } else {
                $("> li > a", $container).show().parent().show();//show"a" and "
            }
        });
    });
</script>

Jquery Filter (keyup bind.. the function) soo simple but it doesnt work

3 Answers3