jQuery UI autocompletar: Obtener referencia al ul

Question

Tengo 4 jQuery autocompletar cuadros de texto. Necesito agregar un poco de estilo a una lista de autocompletar en particular.

El ul se agrega al cuerpo con la clase ui-autocomplete. No hay un enlace que diga a qué ul pertenece a qué cuadro de texto.

por eso es necesario añadir el estilo de la interfaz de usuario después de que el éxito del Ajax o alguna opción que viene con

$("#srchList").autocomplete(
source: function (request, response) { 
      $.ajax({ ..... 
         success: function (d) { 
         }, 
        ...... 
       }); 
      }, 
open: .... 
select : ..... 
).data('autocomplete')._renderItem = function (liObj, item) { 
    //Position the Autocomplete dropdown. This is not working !!! 
    //$(liObj).parent().css({ 'margin-left': '-18px' }); 

    //Style the dropdown Item. (this works. the li is returned as string to jQuery UI and is added by the jQuery UI to the ul) 
    return $("<li class='dropItem'></li>") 
      .data("item.autocomplete", item) 
      .append($("<a></a>").html(item.label)) 
      .appendTo(liObj); 
}; 

Hay algunas opciones como: abierta, positon: etc, pero ninguno de ellos obtener la ul -controlar para que aplique el estilo css sobre él.

Por favor, ayúdame a obtener la referencia a la ul para un cuadro de texto en particular.

Estructura DOM: El cuadro de texto está en algún lugar dentro de las <form>

Gracias de antemano.

Answer 1

"se añade el ul al cuerpo por jQuery UI. Nos no puede controlar la estructura DOM en cuanto a donde se agrega el ul. Actualizar una imagen de cómo es mi DOM ... - Raghav hace 5 minutos "- usted realmente puede influenciar donde el marcador de posición ul es insertado por Jqueryui:

Use the Opción "appendTo" cuando inicia las autocompletas. Tenga dos divs vacíos, uno donde se agregarán uls "estándar", uno donde tenga su estilo especial ul.

$(".the-standards").autocomplete({ appendTo: "#someStandardDiv" }); 
$(".your-special-autocomplete").autocomplete({ appendTo: "#someSpecialDiv" }); 

y luego en el CSS, se puede pre-especificar fancyness como

#someSpecialDiv .ui-autocomplete { border: 1px solid red !important }; 

de acceso a su perfil especial de jQuery por:

$('#someSpecialDiv .ui-autocomplete').css('border', '1px solid red'); 

Answer 2

bien espero que te tengo ahora, para que quiero dar estilo a cada elemento de la lista de autocompletar uso dataFilter o formatItem

$("#srchList").autocomplete(
source: function (request, response) { 
    $.ajax({ ..... 
     dataFilter: function(data) { return "<span style='.....'>"+data+"</span>"; }, 
     // or 
     formatItem: function(data) { return "<span style='.....'>"+data+"</span>"; }, 
     //something like this, you can change it as per your requirement. 
     success: function (d) { 
         }, 
        ...... 
       }); 
      }, 
open: .... 
select : ..... 
); 

Answer 3

Puede agregar la clase CSS para que ul con la clase 'ui-autocompletar' usando:

$(elem).autocomplete({ 
    source: ... 
}).autocomplete("widget").addClass("whatever"); 

Clase 'lo que sea' aplicado a ul. véase más adelante img:

Answer 4

$("#srchList").autocomplete({ 
    source: ... 
}).autocomplete("widget").addClass("your_custom_class"); 

Answer 5

select: function(event, ui) { 
    // that's how get the menu reference: 
    var widget = $(this).data('ui-autocomplete'), 
    menu = widget.menu, 
    $ul = menu.element, 
    id  = $ul.attr('id'); // or $ul[0].id 
}