php - 使用 jQuery 过滤列表项

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