需要搜索框过滤器 javascript答案

【问题标题】：Need search box filter javascript需要搜索框过滤器 javascript
【发布时间】：2018-09-08 05:32:29
【问题描述】：

待办事项：

我需要 javascript 中的搜索框过滤器来搜索和过滤这些过滤器
当我输入诸如c之类的单词时，它会显示calvin, cars, cinama。
这是一个示例列表。

<ul>
  <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>

【问题讨论】：

你尝试了什么，请显示一些代码。
How to implement a google suggest-like input field?的可能重复

标签： javascript jquery html css search

【解决方案1】：

这是您要找的吗，如果是，它工作正常。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>


<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Hello</a></li>
  <li><a href="#">Is</a></li>

  <li><a href="#">This</a></li>
  <li><a href="#">What</a></li>

  <li><a href="#">You</a></li>
  <li><a href="#">are</a></li>
  <li><a href="#">Looking?</a></li>
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter)===0) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

</body>
</html>

【讨论】：

我认为应该是 a.innerHTML.toUpperCase().indexOf(filter) === 0 ，问题是要开始的东西，您正在尝试查找元素是否存在。无论如何，一个有用的。
以上工作，但它显示过滤器列表。我需要这个带有隐藏过滤器列表的搜索过滤器框。例如，当我输入单词“c”时，它会显示我的结果。
@mibrahim 你能解释一下，你到底想要什么。所以我会尝试。

【解决方案2】：

您可以使用match-sorter 之类的库。它在做这种模糊搜索方面做得很好。

如果你没有使用 node/es6 环境，那么你可以使用https://unpkg.com/match-sorter@2.3.0/dist/match-sorter.cjs.js 直接在你的代码中包含这个库。将此 JS 包含到您的 HTML 中，并将搜索逻辑包含在 script 标记中。

【讨论】：

【解决方案3】：

试试这个

HTML

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

【讨论】：

仍然无法正常过滤单词，当我输入单词然后显示结果时，我需要带有隐藏搜索列表的完整代码。无论如何感谢您的帮助。