爲什麼我的搜索過濾列表不起作用？

Question

我試圖用HTML和jQuery顯示一堆列表項（在一個Onsen UI移動應用程序中），然後根據輸入的字符允許它們被過濾。出於某種原因，它不起作用。我究竟做錯了什麼？

我的HTML是：

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

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

這裏是一個小提琴：https://jsfiddle.net/4mw0k9m9/3/

Answer 1

的問題似乎是，如果聲明如下：

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

使用此，它的工作原理：

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