Question

这是应该隐藏li＆gt;的Jquery代码。 a不包含文本输入中的匹配值。这是一个检查输入的密钥的功能，它会看到div（s）？匹配该值。

然后支持隐藏输入中没有包含值的那些。

<input type="text" id="targety" placeholder="Filter Items..." />
<ul id="ded">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>

</div>


<script>
$('#targety').bind('keyup', function() { 
if($("#targety").val() == ""){
$("#ded > li > a").show();
}else{

$("#ded > li > a:visible:not(:contains('"+$("#targety").val()+"')").hide("fast");
}

 } );
</script>

Answer 1

我按照以下方式开展工作：

$(function(){
    var $targety = $("#targety"),
        $anchors = $("#ded >li a");
    $targety.on('keyup', function() {
        var val = $targety.val();
        $anchors.show();
        if (val !== "") {
            var pattern = new RegExp('^' + val, 'i');
            $anchors.not(function(index) {
                return $(this).text().match(pattern);
            }).hide();
        }
    });
});

请参阅fiddle

注意：

键盘处理程序效率很重要。它的效率和我能做的一样高效。特别是，不会在其中创建jQuery对象。
使用.toLowerCase()和.indexOf()可以避免使用RegExp。（还有it's faster）
我放弃:visible，hide("fast")支持hide()以使代码完全同步。否则，打字的速度可能（并且很可能会）打败原来的逻辑。
无条件.show()允许重新显示元素，因为输入字符串会逐渐删除。

编辑：

更正 - .not()返回一个新的jQuery对象，因此我的第一个音符的最后一句不正确。但是，$anchors.not(...)将比$（...）更有效，它将从整个DOM作为其基线。

Answer 2

看起来你只是在选择器中遗漏了一个括号：

... :contains('" + $("#targety").val() + "'))") ...
                                            ^

顺便说一句，您可以在回调中使用this代替"#targety"。

Answer 3

需要注意的一点是“：contains”区分大小写您可以找到一个函数来处理“未来”问题：https://stackoverflow.com/a/2196683/1220302

至于你的代码，我建议你在输入框上设置一个最小长度。这是一个例子 - 这对于学习来说有点冗长。正如你所看到的，我也隐藏了“父母”“li”。

<script type="text/javascript">
    $(document).ready(function () {
        var $container = $("#ded"); //Set the container
        $('#targety').bind('keyup', function () {
            var value = $(this).val();
            if (value.length >= 3) {
                var filter = "> li a:visible:not(:contains('" + value + "'))";
                console.log("Found: " + $(filter).length); console.log(filter); //Debug logging - remove 
                $(filter, $container).hide("fast").parent().hide("fast"); //hide "a" and "li"
            } else {
                $("> li > a", $container).show().parent().show();//show"a" and "
            }
        });
    });
</script>

Jquery Filter（keyup bind ..函数）如此简单但不起作用

3 个答案: