JQuery живой поиск.Проверяйте по каждой букве - PullRequest
Новая
       26

JQuery живой поиск.Проверяйте по каждой букве

0 голосов
/ 24 октября 2011

Я использовал живой поиск 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);

Ответы [ 2 ]

1 голос
/ 24 октября 2011

Итак, вот окончательный сценарий, отредактированный с использованием нечувствительного к регистру метода «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);
0 голосов
/ 24 октября 2011

Вы должны определить другой метод содержит: 

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