一段JS代码

Question

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };
 
  function filterList(header, slist) {
    var form = $("<form>").attr({"class":"filterform form-search","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","placeholder":"Type to Filter","type":"text"});
    $(form).append(input).appendTo(header);
 
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
 
          $matches = $(slist).find('a:Contains(' + filter + ')').parent();
          $('li', slist).not($matches).slideUp();
          $matches.slideDown();
 
        } else {
          $(slist).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }
 
  $(function () {
    filterList($("#form"), $("#slist"));
  });
}(jQuery));

那位同学可以给解释下这段代码的具体作用，看不懂

Answer 1

通过输入一段文字来筛选对应的列表。

首先通过jQuery.expr自定义选择器:Contains，a就是当前元素，m[3]代表筛选条件。作用就是选出elem以及elem的后代节点包涵filter的。

然后添加input和form到，输入获取input的值，如果匹配list里面存在li，则存在的那一部分下拉出现

 $matches = $(slist).find('a:Contains(' + filter + ')').parent();
 $('li', slist).not($matches).slideUp();
 $matches.slideDown();

如果filter为空则全部出现

 $(slist).find("li").slideDown();