jQuery UI自动完成:获取对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:等等.但是没有一个选项让我能够在它上面应用css样式.

请帮助我获取一个特定文本框的ul参考.

DOM结构:文本框位于内部 <form>

提前致谢.

Answer 1

您可以使用以下命令将CSS类添加到具有类'ui-autocomplete'的ul中:

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

类''无论'应用于ul.见下面的img:

Answer 2

"通过Jquery UI将ul添加到正文中.我们无法控制DOM结构添加ul的位置.更新我的DOM的图像... - Raghav 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');