Completamento automatico jQuery UI: riferimento alla ul

Question

Ho 4 caselle di testo complete di jQuery. Ho bisogno di aggiungere un po 'di stile ad un particolare elenco di completamento automatico.

L'ul è aggiunto al corpo con la classe ui-autocomplete. Non esiste alcun link che possa dire quale ul appartiene a quale casella di testo.

Così ho bisogno di aggiungere lo stile per l'interfaccia utente, dopo il successo di Ajax o qualche opzione che viene fornito 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); 
}; 

Ci sono alcune opzioni aperte come:, positon: ecc, ma nessuno di loro ottenere il ul -control per me per applicare lo stile CSS su di esso.

Please help me per ottenere il riferimento al ul per una casella di testo particolare.

DOM Struttura: La casella di testo è da qualche parte dentro le <form>

Grazie in anticipo.

Answer 1

"è aggiunto il ul al corpo con jQuery UI. Noi non è possibile controllare la struttura del DOM in base a dove viene aggiunto l'ul. Aggiornare un'immagine di come il mio DOM è ... - Raghav 5 minuti fa "- puoi effettivamente influenzare dove viene inserito il segnaposto ul di Jqueryui:

opzione "appendTo" quando si inizializzano i completamenti automatici. Avere due div vu, uno in cui verranno aggiunti gli "standard", uno in cui si ha il proprio stile speciale ul.

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

e poi nel CSS, è possibile pre-specificare fancyness come

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

dell'accesso tua inserzione speciale da jQuery da:

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

Answer 2

bene spero got you, in modo che voglio dare stile ad ogni elemento della lista di completamento automatico 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

È possibile aggiungere classe CSS a quella ul con classe 'ui-autocomplete' usando:

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

Classe "qualunque" viene applicata a ul. vedi sotto 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 
}