jQuery 实时搜索。检查每个字母

Question

我使用 jquery 实时搜索进行实时搜索。我有这个html。一个包含很多人名的列表。

<ul id="friends" class="friend-selection">
    <li>
        <a href="#" title="Ik nodig deze vriendin uit">    
            <img src="static/img/voorbeeld/vrouw.jpg" width="50" height="50">
            <span class="name">Janneke Scheerhoorn</span>
        </a>        
    </li>
<ul>
<input type="text" name="q" value="">

现在我使用 jquery 实时搜索功能。但我有一个问题。实时搜索区分大小写。如何修复实时搜索脚本。这不区分大小写。感谢帮助。这里有脚本：

插件：

(function($) {
  var Search = function(block) {
    this.callbacks = {};
    block(this);
  }

  Search.prototype.all = function(fn) { this.callbacks.all = fn; }
  Search.prototype.reset = function(fn) { this.callbacks.reset = fn; }
  Search.prototype.empty = function(fn) { this.callbacks.empty = fn; }
  Search.prototype.results = function(fn) { this.callbacks.results = fn; }

  function query(selector) {
    if (val = this.val()) {
      return $(selector + ':contains("' + val + '")');;
    } else {
      return false;
    }
  }

  $.fn.search = function search(selector, block) {
    var search = new Search(block);
    var callbacks = search.callbacks;

    function perform() {
      if (result = query.call($(this), selector)) {
        callbacks.all && callbacks.all.call(this, result);
        var method = result.size() > 0 ? 'results' : 'empty';
        return callbacks[method] && callbacks[method].call(this, result);
      } else {
        callbacks.all && callbacks.all.call(this, $(selector));
        return callbacks.reset && callbacks.reset.call(this);
      };
    }

    $(this).live('keypress', perform);
    $(this).live('keydown', perform);
    $(this).live('keyup', perform);
    $(this).bind('blur', perform);
  }
})(jQuery);

在 html 中我使用了这个：

(function($) {
        $(document).ready(function() {
          $('input[name="q"]').search('#friends li', function(on) {
            on.all(function(results) {
              var size = results ? results.size() : 0
              $('#count').text(size + ' results');
            });

            on.reset(function() {
              $('#none').hide();
              $('#friends li').show();
            });

            on.empty(function() {
              $('#none').show();
              $('#friends li').hide();
            });

            on.results(function(results) {
              $('#none').hide();
              $('#friends li').hide();
              results.show();
            });
          });
        });
      })(jQuery);

Answer 1

所以这是使用不区分大小写的“包含”方法编辑的最终脚本。请注意，我在“查询”函数中将“包含”更改为“包含”：

(function($) {
    var Search = function(block) {
        this.callbacks = {};
        block(this);
    }

    Search.prototype.all = function(fn) { this.callbacks.all = fn; }
    Search.prototype.reset = function(fn) { this.callbacks.reset = fn; }
    Search.prototype.empty = function(fn) { this.callbacks.empty = fn; }
    Search.prototype.results = function(fn) { this.callbacks.results = fn; }

    jQuery.expr[':'].Contains = function(element,i,m){
        return (element.textContent || element.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
    }; 

    function query(selector) {
        if (val = this.val()) {
            return $(selector + ':Contains("' + val + '")');;
        } else {
            return false;
        }
    }

    $.fn.search = function search(selector, block) {
        var search = new Search(block);
        var callbacks = search.callbacks;

        function perform() {
            if (result = query.call($(this), selector)) {
                callbacks.all && callbacks.all.call(this, result);
                var method = result.size() > 0 ? 'results' : 'empty';
                return callbacks[method] && callbacks[method].call(this, result);
            } else {
                callbacks.all && callbacks.all.call(this, $(selector));
                return callbacks.reset && callbacks.reset.call(this);
            };
        }

        $(this).live('keypress', perform);
        $(this).live('keydown', perform);
        $(this).live('keyup', perform);
        $(this).bind('blur', perform);
    }
})(jQuery);

Answer 2

你应该定义另一个包含方法：

jQuery.expr[':'].Contains = function(element,i,m){
    return (element.textContent || element.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};