Question

是否有人制作了一个会过滤掉列表项的搜索框？

示例我有： [顶部的搜索框]

<ul>
   <li>
      Item 1
      <ul>
         <li>Item 1-1</li>
         <li>Item 1-2</li>
      </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3
       <ul>
          <li>Item 1-1</li>
          <li>Item 1-2</li>
       </ul>
    </li>
</ul>

因此搜索框将根据输入的搜索框过滤并显示项目。

Answer 1

这将有助于您设置搜索框。但我建议你使用jQuery Autocomplete，它具有你想要的所有功能。

无论如何，这是一个简单的代码

 $("#search").keyup(function() {
   var searchText = $(this).val().toLowerCase();
   $("#results li").each(function() {
      var string = $(this).text().toLowerCase();
      if(string.indexOf(searchText)!=-1) {
        $(this).show();
      } else {
        $(this).hide();
      }
   });
});

在HTML中：

您需要在li & ul

中包含整个结果，即<div id="results"></div>

<强> DEMO

Answer 2

为此你可以使用javascript如果项目是固定的，如果没有，那么你可以使用ajax。

如何？

使用函数

调用函数值 - 更改文本框值和填充值

function list()
{
  //  filter items from your list and add between <li> and put inside search ul

     document.getElementbyid("search").innerHTML= your filtered list between li tag


}

<input type="text" id="box" onchange="list()">
<ul id="search">

</ul>

使用jQuery过滤列表项

2 个答案: