Question

我在html中有一个列表视图，其中包含标题和子元素。我已经实现了jquery脚本来过滤头部和子元素，但问题是当我搜索子元素时，我也得到了具有其他元素的特定子元素。实际结果应该是（假设我在搜索框中搜索“xxx”，输出应该是标题元素，而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

试试这个：

$("#search").keyup(function () {
   var SEARCHWORD = this.value;
   $("#list li").each(function () {
      $(this).hide();
      $('p:contains(' + SEARCHWORD + ')').closest('li').show();
      $('p:contains(' + SEARCHWORD + ')').show().siblings('p').hide();
      if (SEARCHWORD == "") {
          $('#list').find('p:hidden').show();
      }
   });
});

Fiddle

您必须添加此条件才能显示隐藏的元素：

if (SEARCHWORD == "") {
   $('#list').find('p:hidden').show();
}

Updated Fiddle

根据您最新的dom结构，表和tds更新到此代码：

$("#search").keyup(function () {
  var SEARCHWORD = this.value;
  $("#list tr").each(function () {
      $(this).hide();
      $('td:contains(' + SEARCHWORD + ')').closest('tr').show();
      if (SEARCHWORD == "") {
          $('#list').find('tr:hidden').show();
      }
   });
});

Updated Fiddle with table structure.

Answer 2

我已经修改了你的小提琴，包括CSS和JS的组合来实现你想要的。您的一个复杂因素是，您希望标题显示是否有任何兄弟姐妹匹配。因此，您无法根据不匹配隐藏标题，因为可能存在不同的兄弟匹配。

其次，多个兄弟姐妹可能会匹配。这意味着您不能仅根据匹配显示/隐藏兄弟姐妹。如果两个兄弟姐妹都匹配，则需要同时显示两者，并且任何隐藏兄弟姐妹的代码都可能隐藏前一个匹配。

我添加了CSS代码来根据匹配和用户正在搜索的事件进行显示/隐藏（因此清除框将重新显示所有内容）。然后JS只是设置或删除'命中'类。

#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');
    }
  })
});

这是更新的小提琴http://jsfiddle.net/gS4AS/4/

在jquerymobile中列出视图搜索过滤器

2 个答案:

Fiddle

Updated Fiddle

Updated Fiddle with table structure.