Question

我是jQuery的新手 - 我在网上找到了这个片段并根据我的目的进行了调整。它会在您键入时搜索页面，并删除所有不包含您搜索的值的对象。它就像一个魅力，但我希望能够突出显示用户在输入字段中输入的结果中的字符串。

我知道我需要使用类似addClass的东西。（'突出显示'），但我不知道在这个片段中我可以在哪里以及如何做到这一点。你能帮我吗？


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

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

            on.reset(function() {
                $('#none').hide();
                $('#hint').show();
                $('.element').show();
            });

            on.empty(function() {
                $('#none').show();
                $('#count').hide();
                $('.element').hide();
            });

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

Answer 1

我使用这个Highlight插件做类似的事情

jQuery：突出显示实时搜索结果

1 个答案: