Javascript jquerymobile中的列表视图搜索筛选器

我有一个html的列表视图，它有头和子元素。我已经实现了jquery脚本来过滤头元素和子元素，但问题是当我搜索子元素时，我会得到这个特定的子元素以及其中的其他元素。实际结果应该是（假设我在搜索框中搜索“xxx”，则输出应该是header元素和子xxx元素，但这不会发生）。我也得到了xxx结果和其他子元素aaa。请帮忙。我已附加JSFIDLE链接“”

试试这个：

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

---

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

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

---

根据您最新的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();
      }
   });
});

---

我已经修改了你的提琴，加入了CSS和JS的组合来完成你想要的。一个复杂的问题是，您希望标题显示是否有任何兄弟匹配。因此，无法基于不匹配项隐藏标头，因为可能存在不同的同级匹配项

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

我添加了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

嗨，Matt，谢谢你的回复，但是当我运行你的更新的fiddle时，搜索没有显示任何列表，它变为空白，请检查一下。谢谢Jai，我试过你的fiddle，它工作正常，但是当我清除文本时，只有标题显示，忽略了子元素，你能检查一下吗？谢谢@Jai的帮助hi Jai，我有一个包含值的表标记，而不是标记，ie

• 校长1这是aaa这是xxx这是def
ypu能帮我一下吗以与搜索相同的方式搜索此表值，我是这个jquery的新手，我们将非常感谢您的帮助。@user3393032访问更新的fiddle并遵循此链接

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