0

これは、テキスト入力に一致する値が含まれていない li > a を非表示にする Jquery コードです。入力のキーアップをチェックする関数があり、div(s)? 値に一致します。

次に、SUPPOSED TO は、入力内に値が含まれていないものを非表示にします。

<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 オブジェクトは作成されません。
  • RegExp は、代わりに.toLowerCase()andを使用することで回避できます。.indexOf()（そして、はい、それはより高速です）
  • を捨てて: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

注意すべきことの1つは、「:contains」は大文字と小文字が区別されることです

コードに関しては、入力ボックスに最小の長さを設定することをお勧めします。以下に例を示します - これは学習のために少し冗長です。ご覧のとおり、「親」「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 に答える