jQuery UI 自动完成 : Getting reference to the ul

Question

我有 4 个 jQuery 自动完成文本框。我需要向一个特定的自动完成列表添加一些样式。

ul 被添加到正文中，类为 ui-autocomplete 。没有链接表明哪个 ul属于哪个文本框。

所以我需要在 Ajax Success 或附带的一些选项之后将样式添加到 UI

$("#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 控制让我在其上应用 css 样式。

请帮助我获取对某个特定文本框的 ul 的引用。

DOM 结构:文本框位于 <form> 内的某个位置

提前致谢。

Answer 1

您可以使用以下方法将 CSS 类添加到具有“ui-autocomplete”类的 ul:

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

类“whatever”被应用到 ul。见下图: