javascript - 为什么我的可搜索过滤列表不起作用？

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

这是一个 fiddle :https://jsfiddle.net/4mw0k9m9/3/

Answer 1

问题似乎出在下面的 if 语句上:

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

使用这个就可以了:

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