1

私には一連の部門があります。

<div id="people">
  <div>
    <p>Joe Blogs</p>
    <img src=".." />
  </div>
  <div>
    <p>Jane Doe</p>
    <img src=".." />
  </div>
</div>

入力テキストボックスを作成できるようにしたいのですが、入力すると（pタグ内の）分割が検索され、文字列の一部または全体が一致すると分割が表示されます。一致しない場合は、一致しないものがすべて非表示になります。部門。

jQueryを使用してこれをどのように行うのが最善でしょうか？

どうもありがとう？

4

3 に答える 3

2

リストのサイズによっては、：containsセレクターが適切に機能します。

デモ

$(function() {
  $("#filter").on("keyup",function() {
    var val = $(this).val();
    var people = $("#people > div");
    if (val=="") people.show();
    else {
      people.hide()
      $("#people > div:contains('"+val+"')").show();
    }
  });
});

ちなみに、これは大文字と小文字を区別します。大文字と小文字を区別する方法の巧妙なケースについては、https：//stackoverflow.com/a/4936066/295783を参照してください。

于 2013-01-09T10:40:17.370 に答える
1

デモ

参照

var results = [];
$("#people p").each(function(){
   results.push($(this).text());
});

jQuery('#filter').on('keyup', function(event){
    var term = jQuery(this).val();
    var htm = '';
    jQuery('#result').empty().hide();

    //Keys with codes 40 and below are special (enter, arrow keys, escape, etc.), Key code 8 is backspace.
    if(event.keyCode > 40 || event.keyCode <91  || event.keyCode == 8 ||
      event.keyCode == 20 || event.keyCode == 16 || event.keyCode == 9 ||
      event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 ||
      event.keyCode == 40) {
        for(x in results){
            var match = results[x];
            if(match.toLowerCase().indexOf(term.toLowerCase()) != -1){
                var o = '<b><u>'+term+'</u></b>';
                var a = match.replace(term, o);
                htm += '<li>'+a+'</li>';
            }
        }
        var output = '<ol>' + htm + '</ol>';
        if (htm.length > 0) {
            jQuery('#result').show().append(output);
        }
    }
    if(term.length == 0){
        jQuery('#result').empty().hide();
    }
});
于 2013-01-09T10:22:41.867 に答える
1

javascriptオブジェクトを使用してデータをフィルタリングすることをお勧めします（サーバーからデータを取得し、それらをフィルタリングして、テンプレートエンジン（jsrenderまたはその他）で表示します）。

あなたの例では、次のようになります。

var timer,
    items = $('#people > div');

var refreshFilter = function(txt) {
    clearTimeout(timer);
    timer = setTimeout(function() {
        var showItems = items.find("p:contains('" + txt + "')").closest('div').show();
        items.not(showItems).hide();
    }, 200);
};

$('#search').keyup(function () {
    refreshFilter(this.value);
});

デモ： http： //jsfiddle.net/rptgf/

于 2013-01-09T10:42:36.823 に答える