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

问题似乎是下面的if语句：

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

使用它，它可以工作：

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

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

1 个答案: