Фильтр списка JQuery не будет работать с неправильными символами

У меня есть этот фильтр для списка html, который я получил из Keyup фильтровать несколько списков с заголовками с помощью jQuery. Проблема в том, что как только вы наберете неправильное слово/символ, которого нет в списке, оно как бы сломается и не будет работать, пока вы полностью не сотрете/удалите его из поля ввода. Есть ли способ исправить исходный код, чтобы он работал даже после того, как вы просто удалили неправильный символ?

http://jsfiddle.net/thesystemrestart/zzG4f/5/

HTML:

<ul id="workflow_books">    
<li>
    <h6 class="custom"> Custom Books</h6>

    <ul>
        <li class="custom-books">
            <a>Don't see your book in our list? Add it yourself!</a>
        </li>
    </ul>
</li>

<li>
    <h6>Academic</h6>

    <ul>
        <li>
            <a>Academic Book One</a>
        </li>

        <li>
            <a>Academic Book Two</a>
        </li>
    </ul>
</li>

<li>        
    <h6>Botany</h6>

    <ul>
        <li>
            <a>Botany Book One</a>
        </li>

        <li>
            <a>Botany Book Two</a>
        </li>
    </ul>
</li>
</ul>

JQuery

var $products = $('#workflow_books li ul');
$("#search").keyup(function() {
    var val = this.value.trim();
    if (!val) $('li:hidden', '#workflow_books').show();
    else {
        $('li:hidden', $products).show();
        $('li', $products).filter(function() {
            var re = new RegExp(val, 'ig');
            return !re.test($('a', this).text());
        }).hide();
        $products.each(function() {
            if ($('li:visible', this).length == 0) $(this).parent('li').hide();
            else $(this).parent('li').show();
        });
    }
});

Буду очень признателен за любую помощь. Спасибо.


javascript list html filter jquery
person user3593534    schedule 01.05.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что эта строка:

$('li:hidden', $products).show();

не показывает родителей, если родители были скрыты, поэтому эта строка:

if ($('li:visible', this).length == 0)

никогда не может быть ложным, если родитель скрыт.

Моим основным изменением была первая строка, которую я разместил выше:

$('li:hidden', '#workflow_books').show();

Рабочая скрипка: http://jsfiddle.net/hKv8h/

var $products = $('#workflow_books li ul:not(:first)');
$("#search").keyup(function() {
    var val = this.value.trim();
    $('li:hidden', '#workflow_books').show();
    if (val) {
        $('li:hidden', '#workflow_books').show();
        $('li', $products).filter(function() {
            var re = new RegExp(val, 'ig');
            return !re.test($('a', this).text());
        }).hide();
        $products.each(function() {
            if ($('li:visible', this).length == 0) 
                $(this).parent('li').hide();
            else 
                $(this).parent('li').show();
        });
    }
});
person Jason P    schedule 01.05.2014