7

私はウェブサイトで作業しています。次のように作成された人のリストを含むページがあります。

<div class="personsMenu">
    <div class="person">
        <div class="name">John</div>
        <div class="age">18</div>
    </div>
    <div class="person">
        <div class="name">Kate</div>
        <div class="age">24</div>
    </div>
    <div class="person">
        <div class="name">Tom</div>
        <div class="age">17</div>
    </div>
</div>

テキストボックスもあります<input type="Text" id="filterTextBox"/>

jqueryを使用して、次のことを行う必要があります。

ユーザーがテキストボックスに入力を開始すると、「名前」に文字が含まれていないdivが消えます（ある種の動的フィルターで、名前に書かれた文字が含まれている人だけが表示されます）

したがって、ロジックは次のようになります。

ユーザーがテキスト ボックスに文字を入力する (または文字を削除する) と、すべての "person" div をループし、その "person" 内の "name" div に文字が含まれている場合は表示し、そうでない場合は非表示にします (.show( ) および .hide() jquery で)

もちろん、テキストボックスが空の場合はすべてを表示します。

これはできますか？

助けてくれてありがとう

4

7 に答える 7

7

すべてのキーストロークで、現在の値と一致するかどうかを示す変数を渡すことができ、したがって表示する必要があります.toggle()。.person

$('.my-textbox').keyup(function() {
    var value = $(this).val();
    var exp = new RegExp('^' + value, 'i');

    $('.personsMenu .person').each(function() {
        var isMatch = exp.test($('.name', this).text());
        $(this).toggle(isMatch);
    });
});​

必要に応じて表現を変更します。このバージョンでは、名前が入力された値で始まることを確認し、大文字と小文字を区別しません。

デモ

于 2012-06-27T15:04:32.240 に答える
1

ここから始めましょう。完璧にはほど遠いと思いますが、あなたはすでに試したことと、質問で何がうまくいかなかったのかを示していません。

$("#filterTextBox").on("keyup", function () {
    var search = this.value;
    $(".person").show().filter(function () {
        return $(".name", this).text().indexOf(search) < 0;
    }).hide();        
});​​​​​​​​​​​​​

これが実際の例です。

于 2012-06-27T15:03:09.833 に答える
0

最近、このタイプの作業が必要になり、良い解決策を見つけました。選択した要素の横にあるこのjQuery ポップアウト divを参照してください

于 2013-07-16T20:12:01.420 に答える
0

これをjQueryでタグ付けしたので、 Autocomplete UI Controlを強くお勧めします。私はいくつかのプロジェクトでそれを使用しましたが、このようなローカル データストアを使用するように検索機能を更新できます。補足として、 と の使用を検討することをお勧めし<ul>ます<li>。

コード例

//Search-As-You-Type
$(id).find('input').autocomplete({
    minLength: 2,
    focus: function( event, ui ) {},
    select: function( event, ui ) {},
    source: function(request, response){
        //here is where you want to call your custom function
        findSite(request.term);             
    }
});
于 2012-06-27T15:00:07.030 に答える
0 
$('input').keyup(function(){
  var value = this.value
  $('.person')
    .hide()
    .children('.name')
    .filter(function(){
      var re = new RegExp(value)
      return re.test($(this).text())
    })
    .parent()
    .show()
})
于 2012-06-27T15:03:34.633 に答える
-1

これは、私が使用および作成したスクリプトです。と も使用する必要があり<ul>ます<li>。

(function($){
    $.tzFilter = function(jq, phrase, type, column, ifHidden){
        var new_hidden = false;
        if(this.last_phrase === phrase){
            return false;
        }

        if(!type){
            type = 'ul';
        }

        var phrase_length = phrase.length;
        var words = phrase.toLowerCase().split(' ');

        var matches = function(elem){
            elem.show()
        }
        var noMatch = function(elem){
            elem.hide();
            new_hidden = true
        }
        var getText = function(elem){
            return elem.text()
        }

        if(column){
            var index = null;
            if(type == 'table'){
                jq.find('thead > tr:last > th').each( function(i){
                    if( $.trim($(this).text()) == column ){
                        index = i; return false;
                    }
                });
            } else if (type == 'ul'){
                jq.find("li").each(function(i){
                    if(!$(this).attr('display', 'none')){
                        if( $.trim($(this).text()) == column ){
                        index = i; return false;
                        }
                    }
                });
            }

            if(index == null){
                throw('Index non trouvée: ' + column + '')
            }

            if(type == 'table'){
                getText = function(elem){
                    return jQuery(elem.find(('td:eq(' + index + ')')  )).text();
                }
            } else if (type == 'ul') {
                getText = function(elem){
                    return jQuery(elem.find(('"li:eq(' + index + ')')  )).text();
                }
            }
        }

        // On a simplement ajouté une lettre, on va regarder pour le nouveau mot, sans devoir tout regarder à nouveau
        if((words.size > 1) && (phrase.substr(0, phrase_length - 1) === this.last_phrase)){
            if(phrase[-1] === ' '){
                this.last_phrase = phrase;
                return false;
            }

            // On va chercher uniquement pour le nouveau mot
            var words = words[-1];

            // On cache uniquement les tables visibles
            matches = function(elem) {;}

            if(type == 'table'){
                var elems = jq.find('tbody > tr:visible');
            } else if (type == 'ul'){
                var elems = jq.find('li:visible');
            }
        } else {
            new_hidden = true;

            if(type == 'table'){
                var elems = jq.find('tbody > tr')
            } else if (type == 'ul') {
                var elems = jq.find('li')
            }
        }


        elems.each(function(){
            var elem = $(this);
            $.tzFilter.has_words(getText(elem), words, false) ? matches(elem) : noMatch(elem);
        });

        last_phrase = phrase;

        if(ifHidden && new_hidden){
            ifHidden();
        }
        return jq;
    };

    // On cache pour accélérer le tout
    $.tzFilter.last_phrase = ""

    $.tzFilter.has_words = function(str, words, caseSensitive){
        var text = caseSensitive ? str : str.toLowerCase();
        for (var i=0; i < words.length; i++){
            if(text.indexOf(words[i]) === -1){
                return false;
            }
        }
        return true;
    }
})(jQuery);
于 2012-06-27T15:02:34.567 に答える