I have a webpage with lots of "cards" I want to filter away some cards as I type into the search field, and when I remove a character, show them again (all when empty).

My problem is that it does not seem to work properly, it is "1 character behind" what I write, it also dont show the cards when I remove characters.

It also wont work when I finally write the whole criteria, it will find 3-4 cards when I am missing some letters.

This is the code I have atm:

```
$('#search').keypress(function(){
        $( ".champion" ).each(function( index ) {
            if ( $( this ).find('.name-tag').text().toLowerCase().indexOf($('#search').val().toLowerCase(), 0) == -1) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });

```

I have also tried swapping it around:

```
$('#search').keypress(function(){
    $( ".champion" ).each(function( index ) {
        if ( $('#search').val().toLowerCase().indexOf($( this ).find('.name-tag').text().toLowerCase()) == -1) {
            $(this).css('opacity', '0.7');
        } else {
            $(this).css('opacity', '1');
        }
    });
});

```