javascript - jquerymobile 中的 ListView 搜索过滤器

Question

我有一个 html ListView ，其中包含标题和子元素。我已经实现了jquery脚本来过滤标题和子元素，但问题是当我搜索子元素时，我得到了特定的子元素以及其中的其他元素。实际结果应该是(假设我在搜索框中搜索“xxx”，输出应该是 header 元素和 child-xxx 元素，但没有发生)。我也得到了其他子元素 aaa 的 xxx 结果。请帮忙。我已附上 jsfiddle 链接“My Test Fiddle”

$("#search").keyup(function(){    
var SEARCHWORD = this.value;
$("#list li").each(function(){
if($(this).              
          text().toUpperCase().
          indexOf(SEARCHWORD.toUpperCase()) >=0)
   $(this).show();
else
   $(this).hide();

});
});

Answer 1

我已经修改了你的 fiddle 以包含 CSS 和 JS 的组合来完成你想要的。您的复杂情况之一是您希望标题显示是否有任何兄弟匹配。因此，您不能根据不匹配隐藏 header ，因为可能存在不同的同级匹配。

其次，多个 sibling 可能会匹配。这意味着您不能仅根据匹配来显示/隐藏 sibling 。如果两个 sibling 都匹配，则需要显示两者，并且任何隐藏 sibling 的代码都可能隐藏先前的匹配项。

我添加了 CSS 代码来根据匹配项和用户搜索某些内容的事件进行显示/隐藏(因此清除该框将重新显示所有内容)。然后 JS 只是设置或删除 'hit' 类。

#list.searching h3, #list.searching li > p { display: none }
#list.searching li > p.hit, #list.searching li.hit h3 { display: block }

JS

var theList = $('#list');
$("#search").keyup(function(){    
  var SEARCHWORD = this.value;
   // remove all hits each time
  theList.find('.hit').removeClass('hit');
  if (SEARCHWORD) { 
    // if a search term make sure the list is marked
    theList.addClass('searching');
 } else {
    // remove searching mark
    theList.removeClass('searching'); 
  }
  $("#list li p").each(function() {
    // case-insensitive matching
    if (this.innerText.toLowerCase().indexOf(SEARCHWORD.toLowerCase()) > -1) {
        $(this).addClass('hit').parent().addClass('hit');
    } else {
        $(this).removeClass('hit');
    }
  })
});

这是更新的 fiddle http://jsfiddle.net/gS4AS/4/