需要搜索框过滤器javascript吗

待办事项：

• 我需要搜索框过滤器在javascript中搜索和过滤每一个
• 当我输入诸如

  c

  之类的单词时，它会显示

  calvin、cars、cinama

  。
  下面是一个示例列表

---

这是你正在寻找的，如果是的话，它很好用

函数myFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i

试试这个

HTML

脚本

$(document).on('keyup change','#YourSearchBox',function(){
     var SearchString=$(this).val();
     var Names=$('#MyList').find('a');
     $('#MyList').empty();
     var List='';
     $.each(Names,function(i,ListName){
         if(ListName.text.toLowerCase().includes(SearchString.toLowerCase()))
         {
             List+='<li style="display:block"><a href="#">'+ListName.text+'</a></li>'
         }
         else
         {
            List+='<li style="display:none"><a href="#">'+ListName.text+'</a></li>'
         }
     });
     $('#MyList').append(List);
    });
});

$（document）.on（'keyup change'，'YourSearchBox'，function（）{
var SearchString=$（this.val（）；
变量名称=$（'#MyList'）。查找（'a'）；
$（'#MyList'）.empty（）；
var列表=“”；
$.each（名称、函数（i、列表名）{
if（ListName.text.toLowerCase（）.includes（SearchString.toLowerCase（）））
{
List+='
'
}
其他的
{
列表+='
'
}
});
$（'#MyList'）。追加（列表）；
});
});

您可以使用类似的库。它在模糊搜索方面做得非常好

---

如果您没有使用node/es6 env，那么可以使用直接将该库包含在代码中。将此JS包含到您的HTML中，并在

脚本
标记中包含搜索逻辑。
您尝试了什么，请显示一些代码。我认为它可能是
a.innerHTML.toUpperCase（）.indexOf（filter）==0
，问题需要开始，您正在尝试查找元素是否存在。无论如何，这是一个有用的选项。上面的选项正在工作，但它显示了筛选器列表。我需要这个带有隐藏筛选器列表的搜索筛选器框。例如，当我输入单词“c”时，它将显示我的结果。@mibrahim请您解释一下，您到底想要什么。因此，我将尝试。仍然不能正常工作，以过滤的话，我需要完整的代码与隐藏搜索列表，当我输入的话，然后显示我的结果。不管怎样，谢谢你的帮助。
<ul id="MyList">
  <li><a href="#">KINDY</a></li>
  <li><a href="#">BILLY</a></li>    
  <li><a href="#">DOB</a></li>
  <li><a href="#">CALVIN</a></li>    
  <li><a href="#">ACNE</a></li>
  <li><a href="#">boil</a></li>
  <li><a href="#">cars?</a></li>
  <li><a href="#">cinama</a></li>
  <li><a href="#">lamp</a></li>
</ul>

$(document).on('keyup change','#YourSearchBox',function(){
     var SearchString=$(this).val();
     var Names=$('#MyList').find('a');
     $('#MyList').empty();
     var List='';
     $.each(Names,function(i,ListName){
         if(ListName.text.toLowerCase().includes(SearchString.toLowerCase()))
         {
             List+='<li style="display:block"><a href="#">'+ListName.text+'</a></li>'
         }
         else
         {
            List+='<li style="display:none"><a href="#">'+ListName.text+'</a></li>'
         }
     });
     $('#MyList').append(List);
    });
});