0

私は自分のhtmlにこのコードを持っています:

<form>
        <div style="width:530px; height:220px; overflow-y:scroll;">

              <div class="people">
                <label class="checkbox_1" for="1">
                  <img src="1.jpg" />
                  <span>
                    Jolly Bob Monumir
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="1" id="1" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="2">
                  <img src="2.jpg" />
                  <span>
                    Jonathan Monumir
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="2" id="4" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="3">
                  <img src="3.jpg" />
                  <span>
                    Misoury Crow
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="3" id="3" />
              </div>

              <div class="people">
                <label class="checkbox_1" for="4">
                  <img src="4.jpg" />
                  <span>
                    Michael Crow
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="4" class="checkbox_1" id="4" />
              </div>

        </div>                
    </form>

ページが読み込まれた後、フォーム全体が表示されます。今、私は入力ボックスを持ちたいと思っています。このボックスに人の文字の名前を入力すると、入力した文字を含む名前 (「人」クラスの div) が自動的に表示されたままになります。

例: 「Jo」と入力すると、Jolly Bob Monumir と Jonathan Monumir を含む div が表示され、その他は非表示のままになります。次に、「Cro」と入力すると、Misoury Crow と Michael Crow が表示されるはずです。など。jquery でこれを行うにはどうすればよいですか? 前もって感謝します

更新：私はこれを見つけました、そしてそれは魅力のように機能します!

$('#search-criteria').on('keyup', function(){
    $('div.people').hide();
    var txt = $('#search-criteria').val();
    $('div.people').each(function(){
       if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
           $(this).show();
       }
    });
});
4

3 に答える 3

0

更新：私はこれを見つけました、そしてそれは魅力のように働きます！

$('#search-criteria').on('keyup', function(){
    $('div.people').hide();
    var txt = $('#search-criteria').val();
    $('div.people').each(function(){
       if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
           $(this).show();
       }
    });
});
于 2012-06-05T19:17:57.787 に答える
0

jqueryuiのオートコンプリートのようなものを探していると思います。

于 2012-05-19T14:54:46.243 に答える
0

input入力するフィールドを追加しました：

<input type="text" id="people_name">

jQueryコードは次のとおりです。

$('input#people_name').on('keyup', function() {
  var value = this.value.trim();
    if(value.length) {
        $('div.people span').filter(function() {
            return new RegExp(value, 'i').test($(this).text());
        }).closest('div.people').show();
    } else $('div.people').hide();
});

デモ

注: 任意のオートコンプリート プラグインを使用できます。

于 2012-05-19T15:13:44.807 に答える