有没有办法使用 javascript/jquery 搜索一组 li 标签并缩小搜索范围答案

【问题标题】：Is there a way to use javascript/jquery to search a group of li tags and narrow the search down有没有办法使用 javascript/jquery 搜索一组 li 标签并缩小搜索范围
【发布时间】：2013-03-26 16:29:19
【问题描述】：

我一直在网上寻找有关如何做到这一点的想法。我有一个DrillDown menu，在某些时候有六层深（不是我的选择，这是客户想要的）我创建了一个包含所有这些项目的 xml 文档，用户可以选择总共 106 个不同的选项仅在侧面菜单中（再次是客户想要的）。我想创建一个搜索框，允许我输入其中一个选项的名称，然后列表将缩小为仅显示带有用户输入的单词的选项。

我的问题是否有允许这种行为的插件？

如果不是，如何在一组 li 元素中搜索文本？

【问题讨论】：

这完全取决于最终的 HTML 结构以及您要搜索的元素（例如，您是否要搜索 HTML 值或 li 标签内的值）。
只有 li 标签中的值。其余页面基本上是用户想要查看的报告。搜索字段实际上仅用于导航，以使其更易于导航

标签： javascript jquery search

【解决方案1】：

您可以尝试通过contains选择器过滤：

var matches = $( 'ul#myMenu' ).find( 'li:contains(search string) ' );
$( 'li', 'ul#myMenu' ).not( matches ).slideUp();
matches.slideDown();

查看jsFiddle上的示例

【讨论】：

【解决方案2】：

如何在一组 li 元素中搜索文本？

var filteredLIS = $("li:contains('" + yourQuery + "')");

参考：http://api.jquery.com/contains-selector/

【讨论】：

【解决方案3】：

在此处使用向下钻取示例：

http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/getting-started/

这是我的建议：

$('#drilldown').find("a:contains('Product')");

【讨论】：

【解决方案4】：

自己编写代码相当简单，下面的 jQuery 从输入 #inputString 中获取一个字符串，并将遍历列表项“ul li”并根据它们是否与输入字符串匹配来显示/隐藏。

如果需要，您可以修改“ul li”选择器以包含其他列表

jQuery("#inputString").keyup(function () {
    var filter = jQuery(this).val();
    jQuery("ul li").each(function () {
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
            jQuery(this).hide();
        } else {
            jQuery(this).show()
        }
    });
});

我希望有很多插件可以做同样的事情，给它一个谷歌！

【讨论】：

我怀疑我在谷歌上搜索了错误的东西，我将根据答案优化我的搜索
我会尝试其中一个答案，它只有几行代码
非常好的答案

【解决方案5】：

您可以尝试使用这个概念：

$('.search').keyup(function(){
    if( $(this).val().length > 0 ){
        var foundin = $('#drilldown').find('li a:contains("'+$(this).val()+'")');
    }
});

【讨论】：

【解决方案6】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // Start here: Search Service area via jQuery
  window.filter = function(element)
  {
    var value = $(element).val().toUpperCase();
    $(".left_message > li").each(function() 
    {
      if ($(this).text().toUpperCase().search(value) > -1){
        $(this).show();
      }
      else {
        $(this).hide();
      }
    });
  }
});
</script>

<input type="text"  placeholder="Enter text to search" onkeyup="filter(this);">

<ul role="tablist" class="left_message">
    <li><a href="#"><span>Anupk Kumar</span></a></li>
    <li><a href="#"><span>Pradeep Kumar</span></a></li>
    <li><a href="#"><span>Zahid Gani</span></a></li>
    <li><a href="#"><span>Amitabh</span></a></li>
    <li><a href="#"><span>Chandan Gupta</span></a></li> 
</ul>



Result : Search Zahid , they return following output

<ul role="tablist" class="left_message">`enter code here`
    <li><a href="#"><span>Zahid Gani</span></a></li>    
</ul>

【讨论】：