JQuery OnPage поиск с функцией выпадающего

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больше не могут кликать. может быть, я просто неправильно задал некоторые классы, или моя логика в этой функции поиска не надежна.

Я использую дерево каталогов для создания дерева.

Кто-нибудь может здесь помочь?