0

UI で JavaScript を使用してフィルタリング メカニズムを実装しようとしています。DOM をトラバースして検索語を検索します。これが私の HTML と UI の外観です。 ここに画像の説明を入力

したがって、データ（動的）がバックエンドから（Javaを介して）ロードされると、検索した特定のキーワードについてHTMLでDOMをトラバースしたいという考えです。これは私がJqueryでJSを書いている方法です

$(document).ready(function() {
     jQuery('#txtSearch').keyup(function(event){
        if (event.keyCode == 27) {
            resetSearch();
        }

        if (jQuery('#txtSearch').val().length > 0) {
            jQuery('.list-group-item').hide();
            jQuery('.list-group-item span.assignee-style:Contains(\'' + jQuery('#txtSearch').val() + '\')').
            parent('li').parent('ul').parent('li').show();

        }

        if (jQuery('#txtSearch').val().length == 0) {
            resetSearch();
        }

    });      

    function resetSearch(){
        jQuery('#txtSearch').val('');
        jQuery('.list-group-item').show();
        jQuery('#txtSearch').focus();
    }



});

私が期待している動作は、「ジョン」を検索するときに、「ジョン」を含むデータ (3 列すべて) のみを表示することです。ちょうど最初に、担当者の名前だけで DOM をトラバースしています。しかし、結果は私が望んでいたものではありません。私は何を間違っていますか？

4

2 に答える 2

1

.parentタグ名だけでなくセレクターを取るので、次のように簡略化してはどうでしょうか。

$(document).ready(function() {
     jQuery('#txtSearch').keyup(function(event){
        var search = jQuery('#txtSearch').val();
        if (event.keyCode == 27) {
            resetSearch();
        }

        if (search.length > 0) {
            jQuery('.list-group-item').hide();
            jQuery('.list-group-item span.assignee-style:contains(\'' + search + '\')').
                parent('.list-group-item').show();
        }
        else {
            resetSearch();
        }

    });      

    function resetSearch(){
        jQuery('#txtSearch').val('');
        jQuery('.list-group-item').show();
        jQuery('#txtSearch').focus();
    }
});
于 2013-08-19T17:24:39.983 に答える
1

:contains()セレクターとのマッチングでは、大文字と小文字が区別されます。「ジョン」を検索しても「ジョン」は見つかりません。

于 2013-08-19T17:25:07.973 に答える