Question

如何删除末尾data("autocomplete")...的代码并将其放入函数中？

    var input = $("#CountryL");

    $(input).autocomplete({
        minLength: 0,
        source: $(input).data('url')
    }).data("autocomplete")._renderItem = function (ul, item) {
        var tmp = $("<div>").setTemplate($("#"+$(input).data('template')).html());
        tmp.processTemplate(item);
        $("<li></li>").data("item.autocomplete", item)
                      .append($(tmp).html())
                      .appendTo(ul);
        return;
    };

我希望能够做到：

function templateOverride(object){

 object.data("autocomplete")._renderItem = function (ul, item) {
        var tmp = $("<div>").setTemplate($("#"+$(input).data('template')).html());
        tmp.processTemplate(item);
        $("<li></li>").data("item.autocomplete", item)
                      .append($(tmp).html())
                      .appendTo(ul);
        return;
}


var input = $("#CountryL");

$(input).autocomplete({
        minLength: 0,
        source: $(input).data('url')
}).templateOverride(this);

Answer 1

你快到了。简单地扩展jQuery：

$.fn.extend({
  templateOverride: function () {
    return this.each(function () {
      $(this).data("autocomplete")._renderItem = function (ul, item) {
        var tmp = $("<div>").setTemplate($("#"+$(input).data('template')).html());
        tmp.processTemplate(item);
        $("<li></li>").data("item.autocomplete", item)
                      .append($(tmp).html())
                      .appendTo(ul);
      };
    });
  }
});

用法（几乎）完全按照你的建议。

$("#CountryL").autocomplete({
  minLength: 0,
  source:    $(input).data('url')
}).templateOverride();

一点解释：

// fn.extend() adds functions to the jQuery function library 
$.fn.extend({
  // it expects an object, so here we use object literal syntax (key: value)
  templateOverride: function () {
    // here "this" refers to the jQuery object you called the function on,
    // which is an array, so we iterate it with each() *and* return it
    // so jQuery function chaining does not break. 
    return this.each(function () {
      // here "this" refers to the individual HTML objects, so we must wrap
      // it in a jQuery call ($) to have access to its data()
      $(this).data("autocomplete")  // ... your code
    });
  }
});

重构jquery代码

1 个答案: