Why is my searchable filtered list not working?

Question

I'm trying to display a bunch of list items (in an Onsen UI mobile app) with HTML and jQuery and then allow them to be filtered depending on the characters entered. For some reason, it doesn't work. What am I doing wrong?

My HTML is:

<input placeholder="Search Me" id="box" type="text" />

<ons-list class="ng-scope list ons-list-inner">

  <ons-list-header class="list-header trn list__header ons-list-header-inner" data-trn-key="cuisine">Cuisine</ons-list-header>

  <ons-list-item onclick="Load(1);" class="list__item ons-list-item-inner">Apple</ons-list-item>

  <ons-list-item onclick="Load(2);" class="list__item ons-list-item-inner">Orange</ons-list-item>

  <ons-list-item onclick="Load(3);" class="list__item ons-list-item-inner">Melon</ons-list-item>

</ons-list>

And jQuery:

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.list > .list__item').show();
    } else {
        $('.list > .list__item').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});

Here is a fiddle: https://jsfiddle.net/4mw0k9m9/3/

Answer 1

The problem seemed to be the if statement below:

(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();

Use this and it works:

if (text.indexOf(valThis) >= 0) {
    $(this).show()
} else {
    $(this).hide();
}