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

所以这里是用大小写不敏感的'Contains'方法编辑的最终脚本。请注意，我在函数'query'中将'contains'更改为'contains':

(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

你应该定义另一个contains方法:

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