Cómo parchear * solo una * instancia de Autocompletar en una página?

Question

Esta respuesta - jQueryUI: how can I custom-format the Autocomplete plug-in results? - describe cómo hacer un parche en monopatín del widget de autocompletar jqueryUI, para que muestre las cosas de una manera particular. El enfoque que utiliza es reemplazar una función en el $.ui.autocomplete.prototype.

Esto significa que todos widgets de autocompletar recibirán este parche.

¿Hay alguna manera de parchar el widget de autocompletar para solo un elemento de entrada? ¿Qué es?

Cuando examino $('$input').autocomplete, no veo ninguno de los fns de autocompletar allí (_renderItem, _renderMenu, _search, etc.).

Answer 1

Echa un vistazo a custom data and display demo. Esta demostración no está modificando el objeto prototipo del widget de autocompletar, lo que significa que sólo esa instancia del widget se efectúa:

$("selector").autocomplete({ ... }).data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
     .appendTo(ul); 
}; 

He aquí una demostración de trabajo: http://jsfiddle.net/vJSwq/

Answer 2

El código de Andrew Whitaker solo funciona para una entrada de autocompletar. Si selecciona más de un elemento de entrada, el segundo widget de autocompletar no mostrará ninguna entrada. Hay que añadir un foreach al handel todos los elementos de entrada seleccionados como se ha mencionado here

$("selector") 
.autocomplete({ ... }) 
.each(function() { 
    $(this).data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
      .appendTo(ul); 
    }; 
); 

Answer 3

Para las versiones recientes de jQuery (1.8+)/jQuery UI (1.10+), se debe utilizar:

$("selector").autocomplete({ ... }).data('uiAutocomplete')._renderItem = function(ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
    .appendTo(ul); 
};