Question

I used jquery live search for live search. I have this html. A list with a lot of names from persons.

<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="">

Now i used jquery live search function. But i have a problem with this. The live search is is case sensitive. How can i fix the live search script. That this is not case sensitive. Thanks for help. Here you have the script:

Plugin:

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

In the html i used this:

(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

So here is the final script edited with the case unsensitive ‘Contains’ method. Please note that I changed ‘contains’ to ‘Contains’ within the function ‘query’:

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