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

Question

我一直在网上寻找关于如何做到这一点的想法.我有一个DrillDown菜单,在某些点上深六层(不是我的选择这是客户想要的)我创建了一个包含所有这些项目的xml文档,共有106个不同的选项,用户可以选择仅在侧面菜单中(再次是客户想要的).我想创建一个搜索框,允许我输入其中一个选项的名称,列表缩小到只显示用户输入的单词的选项.

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

如果不是如何搜索一组li元素的文本？

Answer 1

自己编写代码是相当简单的,下面的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()
        }
    });
});

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

Answer 2

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

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

请参阅jsFiddle上的示例