Автозаполнение пользовательского интерфейса jQuery: получение ссылки на ul

Question

У меня есть 4 текстовых поля автозаполнения jQuery. Мне нужно добавить какой-то стиль в один конкретный список автозаполнения.

ul добавляется в тело с классом ui-autocomplete. Нет ссылки, которая бы указывала, какой ul принадлежит какому текстовому полю.

Так что мне нужно добавить стиль в пользовательский интерфейс после Ajax Success или какой-либо опции, которая поставляется с

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

Есть несколько вариантов, таких как open:, positon: и т. Д. Но ни один из них не дает мне ul-control для применения стиля css.

Пожалуйста, помогите мне получить ссылку на ul для одного конкретного текстового поля.

Структура DOM: текстовое поле находится где-то внутри <form>

Заранее спасибо.

Answer 1

Вы можете добавить класс CSS к этому ul, имеющему класс 'ui-autocomplete', используя:

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

Класс «что угодно» применяется к ul.см. ниже img:

Answer 2

"ul добавляется в тело с помощью пользовательского интерфейса Jquery. Мы не можем контролировать структуру DOM относительно того, куда добавляется ul. Обновление образа того, как работает мой DOM ... - Рагхав 5 минут назад" - вы действительно можетеВлияние, где заполнитель ul вставляется Jqueryui:

Используйте опцию "appendTo" при инициализации автозаполнения.Иметь два пустых элемента div, один, к которому будут добавлены «стандартные» uls, другой, где у вас есть свой особый стиль ul.

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

, а затем в вашем css вы можете заранее указать причудливость, например

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

доступа к вашему специальному списку из jQuery по:

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

Answer 3

хорошо, я надеюсь, что получил вас сейчас, поэтому вы хотите придать стиль каждому элементу в списке автозаполнения используйте dataFilter или 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 4

 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
}

Answer 5

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