1

How can I remove the code at the end data("autocomplete")... and put it in a function?

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

I'd like to be able to do:

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

1 Answer 1

2

You were almost there. Simply extend 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);
      };
    });
  }
});

Usage is (nearly) exactly as you propose.

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

A bit of an explanation:

// 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
    });
  }
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.