Question

我正在通过jQuery创建一个页面搜索功能。搜索功能应该从输入字段中搜索字符串。如果没有任何匹配，则应隐藏所有内容，如果找到某些内容，则应显示上述所有父母的li元素。

中看起来像这样

这是我的代码：

$("#filter").keyup(function(){
    var filter = $(this).val(), count = 0;
    if(filter == '') {
        $("div#jQ-menus ul").not(".is-open, .main").fadeOut();
    } else {
        $("div#jQ-menus ul li").each(function(){
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                // if not relevant
                $(this).fadeOut();
            } else {
                // if relevant
                $(this).fadeIn();
                $(this).parents("ul").fadeIn();
                count++;
            }
        });
        var numberItems = count;
    }
});

所以有一个像这样的html输出：

<ul class="main">
    <li class="main">
    <span class="toggle" style="cursor: pointer;">+ FBB Werk Hinwil 2012</span>
    <ul style="display: none;">
        <li>
            <span class="toggle" style="cursor: pointer;">+ Fundationsschicht</span>
            <ul style="display: none;">
                <li>
            </ul>
        </li>
        <li>
            <span class="toggle" style="cursor: pointer;">+ Deckschicht</span>
            <ul style="display: none;">
        </li>
    </ul>
</ul>

一切都很棒。但是现在如果我打开一棵树然后我要搜索一些东西，它就可以了。然后，如果我删除搜索字符串，它应该显示与使用搜索功能之前相同的树。这就是问题所在。所有li都不再点击了。也许我只是设置了一些错误的类，或者我的搜索功能背后的逻辑不可靠。

我使用directory-tree来创建树。

有人可以帮忙吗？

带有下拉功能的jQuery onPage搜索

0 个答案: