Javascript / jquery中的搜索框过滤器

Question

背景
HTML页面的导航位于左侧，正文位于右侧。 在导航中，有五个选项卡。 正在使用ul ，并且每个垂直选项卡中都存在几个li元素。 每个垂直选项卡都有搜索框以过滤数据。

1）HTML代码

<h3>First</h3>
<div>
    <input type="text" id="Searchtab1" />   
     <ul id="Firstul">
        <li>Germany</li>
        <li>France</li>
        <li>Sydney</li>    
     </ul>
</div>

脚本代码

$("#Searchtab1").on("keyup click input", function () {
if (this.value.length > 0) {
  $("#Firstul li").hide().filter(function () {
    return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)==  0;

  }).show();

}
else {
  $("#Firstul li").show();
}

同样有五个垂直导航选项卡也有类似的代码。 现在的问题是，在这些搜索的顶部有一个全局搜索框，即在HTML顶部的一个将过滤所有导航选项卡的搜索框。 用户可以进一步过滤单个标签。 当我在单个导航上再次搜索时，基本过滤器工作正常，它再次列出了所有元素。 基本上，全局搜索优先于本地搜索，当用户更改全局搜索/本地搜索中的任何内容时，它应该能够处理情况，应该考虑两个搜索选项（全局优先）来进行更改

这就是我尝试过的
FiddleLink有人可以建议如何纠正此问题。

Answer 1

尝试以下操作：为所有ul元素添加类（alluls）（或使用一些jquery选择器选择它们），然后：

$("#Searchtab1").on("keyup input", function () {
if (this.value.length > 0) {
  $(".alluls").each(function(){
      $(this).children().hide().filter(function () {
        return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)==  0;

      }).show();
  });

}
else {
  $(".alluls li").show();
}

编辑：删除的点击事件

http://jsfiddle.net/EchoSin/p5jxB/6/

Answer 2

您是否尝试过类似JSFIDDLE的操作 ？ 链接： https ： //jsfiddle.net/umaar/t82gZ/

HTML

<form id="live-search" action="" class="styled" method="post">
<fieldset>
    <input type="text" class="text-input" id="filter" value="" />
    <span id="filter-count"></span>
</fieldset>
</form>

<nav>
    <ul>
    <li><a href="#">Jim James</a></li>
    <li><a href="#">Hello Bye</a></li>
    <li><a href="#">Wassup Food</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Bleep bloop</a></li>
    <li><a href="#">jQuery HTML</a></li>
    <li><a href="#">CSS HTML AJAX</a></li>
    <li><a href="#">HTML5 Net Set</a></li>
    <li><a href="#">Node Easy</a></li>
    <li><a href="#">Listing Bloop</a></li>
    <li><a href="#">Contact HTML5</a></li>
    <li><a href="#">CSS3 Ajax</a></li>
    <li><a href="#">ET</a></li>
 </ul>
</nav>}

JavaScript的

$(document).ready(function(){
 $("#filter").keyup(function(){

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(), count = 0;

    // Loop through the comment list
    $("nav ul li").each(function(){

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();

        // Show the list item if the phrase matches and increase the count by 1
        } else {
            $(this).show();
            count++;
        }
    });

    // Update the count
    var numberItems = count;
    $("#filter-count").text("Number of Comments = "+count);
   });
});

当然，这不是您的确切答案，仅适合您！ 但是我创建了这个小提琴，也许它可以为您提供帮助！ 如果您想要其他小提琴，请参见上面的答案！ （EchoSin的）

  $（“＃Searchtab1”）。on（“ keyup input”，function（）{\n    如果（this.value.length> 0）{\n $（ “alluls”）。每个（函数（）{\n $（this）.children（）。hide（）。filter（function（）{\n 返回$（this）.text（）。toLowerCase（）。lastIndexOf（$（“＃Searchtab1”）。val（）。toLowerCase（），0）== 0;\n\n }）。节目（）;\n }）;\n   }\n 其他{\n  $（“。alluls li”）。show（）;\n    } 

https://jsfiddle.net/EchoSin/p5jxB/6/