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'方法編輯的最終腳本。請注意，我在「查詢」功能中將「包含」更改爲「包含」：

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