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

我试图用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/

来源

2017-08-17 user1996496

这就是你想要什么https://jsfiddle.net/q691vuzL/？ –

@CarstenLøvboAndersen是的！如果您创建答案，我会接受它。非常感谢:) – user1996496

的问题似乎是，如果声明如下：

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

使用此，它的工作原理：

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

来源

2017-08-17 12:11:53

谢谢:)完美的作品！ – user1996496

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

回答

相关问题