JQuery列表筛选器无法使用错误的字符

JQuery list filter wont work with wrong characters

本文关键字：错误 字符 列表 筛选 JQuery      更新时间：2023-09-26

我有一个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();
        });
    }
});

如果有任何帮助，我将不胜感激。谢谢

问题是这行：

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

如果父母被隐藏，则不会向父母显示，因此此行：

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

当父级被隐藏时永远不能为false。

我的主要变化是我在上面发布的第一行：

$('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();
        });
    }
});
相关文章：