jquery - 使用 jquery 过滤

Question

我有一组部门；

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

我希望能够有一个输入文本框，当输入它时，它将搜索分区（在 p 标签中），如果字符串部分或全部匹配，它将显示分区，否则隐藏所有不匹配师。

我将如何最好地使用 jQuery 来解决这个问题？

非常感谢？

Answer 1

根据列表的大小，: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

Answer 2

演示

参考

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();
    }
});

Answer 3

最好使用 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/