0

这是应该隐藏文本输入中不包含匹配值的 li > a 的 Jquery 代码。有一个函数可以检查输入的 keyup 并查看 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>
4

3 回答 3

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();
        }
    });
});

见小提琴

笔记：

  • Keyup 处理程序的效率很重要。它的效率是我能做到的。特别是，其中没有创建任何 jQuery 对象。
  • 可以通过使用.toLowerCase()and.indexOf()来避免 RegExp。（是的，它更快）
  • 我放弃了:visible，并hide("fast")赞成hide()使代码完全同步。否则，打字速度可能（并且很可能会）破坏原始逻辑。
  • 无条件.show()允许在逐步删除输入字符串时重新显示元素。

编辑：

更正-.not()返回一个新的 jQuery 对象，所以我的第一个注释的最后一句话不正确。但是，$anchors.not(...)它将比 $(...) 更有效，后者将从整个 DOM 作为其基线工作。

于 2012-05-02T01:57:38.427 回答
0

看起来您只是在选择器中缺少括号：

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

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

于 2012-05-02T00:45:03.837 回答
0

需要注意的一件事是“：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>
于 2012-05-02T01:44:40.933 回答