HTML

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之上的一个搜索框将过滤所有导航选项卡。用户可以进一步筛选各个选项卡。基本过滤器工作正常，当我再次搜索单个导航时，它再次列出所有元素。基本上全局搜索优先于本地搜索，它应该能够处理用户在Globalsearch /本地搜索上进行任何更改时的情况，它应该通过考虑两个搜索选项（全局优先）来改变

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

Answer 1

试试这个：为所有ul elems添加类（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

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

的JavaScript

md-select .mat-select-underline{
  display:none;
}

当然，这不是你的确切答案，只为你而制作！但我创造了那个小提琴，也许它可以帮助你！如果你想要一个不同的小提琴，请看上面的答案！（EchoSin＆＃39; S）

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

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

Javascript / jquery中的搜索框过滤器

2 个答案:

HTML

的JavaScript