0

我正在使用 jQuery 构建一个简单的搜索功能,它将根据用户作为查询输入的内容过滤项目列表。它不会做任何花哨的算法,只是一个简单的匹配。

在这里小提琴:http: //jsfiddle.net/T7hF3/

如您所见,我有嵌套列表。计划是,如果任何列表项匹配,那么它应该显示最高父项<li>并隐藏所有其他没有匹配项的项。

如果用户没有输入任何内容,那么所有列表项都应该再次显示!

谁能帮我指出正确的方向。我尝试使用 jQuery each 方法来查找包含查询的所有项目并显示它们,但它却将它们全部隐藏起来......

4

1 回答 1

3

它不喜欢你contains()对元素的使用,而不是文本。我将其更改为使用过滤器。我还让它隐藏了每个元素,而不仅仅是子li元素,所以一切都被隐藏了。

它现在可以工作,但请记住它区分大小写......

工作jsfiddle示例

$('form.groups-search').live('submit', function(e) {
    e.preventDefault();
    query = $('input#q').val();
    if (query === "") {
        $('ul.groups-tree *').show();
    } else {
        $('ul.groups-tree *').hide();
        $('ul.groups-tree li').filter(function () {
            return $(this).text().indexOf(query) != -1;
        }).show().parents().show();
    }
});?
于 2012-11-08T16:59:22.663 回答