Autouzupełnianie interfejsu jQuery: Uzyskanie odwołania do ul

Question

Mam 4 autouzupełniane pola tekstowe jQuery. Muszę dodać jakiś styl do jednej konkretnej listy autouzupełniania.

Ul jest dodawany do ciała z klasą ui-autocomplete. Nie ma linku, który by powiedział, który należy do którego pola tekstowego.

więc trzeba dodać styl do interfejsu po Ajax sukces lub jakiejś opcji, które pochodzi z

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

Istnieje kilka opcji, takich jak: otwarte, Positon: itd. Ale żaden z nich uzyskać ul -możliwość zastosowania stylu css.

Proszę, pomóż mi uzyskać odniesienie do ul dla jednego konkretnego pola tekstowego.

DOM Struktura: textbox jest gdzieś wewnątrz <form>

z góry dzięki.

Answer 1

„UL dodaje się do organizmu przez jQuery UI. Dla nie mogę kontrolować struktury DOM, gdzie jest dodany ul. Aktualizuję obraz tego, jak wygląda mój DOM ... - Raghav 5 minut temu "- możesz wpłynąć na to, gdzie wstawiany jest symbol zastępczy ul przez Jqueryui:

Użyj "appendTo" opcja podczas inicjowania autouzupełniania. Masz dwa puste elementy div, jeden, gdzie zostaną dodane "standardowe" uls, w którym masz swój specjalny styl ul.

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

a następnie w css, można wstępnie określić fancyness jak

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

dostępu na specjalne notowania z jQuery przez:

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

Answer 2

dobrze Mam nadzieję, mam cię teraz, więc chcesz, aby dać stylu do każdego elementu na liście autouzupełniania użycie dataFilter lub 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

Możesz dodać klasę CSS do ul mający klasę "ui-autouzupełnianie" za pomocą:

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

Klasa "cokolwiek", co zostanie zastosowane do ul. patrz poniżej 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 
}