jquery-ui - ejemplo - jquery autocomplete css

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

Question

Esta respuesta - jQueryUI: ¿cómo puedo personalizar el formato de los resultados del complemento Autocompletar? - describe cómo monopatch el 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 los widgets de autocompletar obtendrán este parche.

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

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

Answer 1

Echa un vistazo a los datos personalizados y muestra la demostración . Esta demostración no modifica el objeto prototipo del widget de autocompletar, lo que significa que solo se efectúa esa instancia del widget:

$("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 );
};

Aquí hay una demostración en funcionamiento: 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. Tienes que agregar un foreach para manejar todos los elementos de entrada seleccionados como se menciona 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+), debe usar:

$("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 );
};