jQuery UI自动完成：获取对ul的引用

Question

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

使用班级ui-autocomplete将ul添加到身体中。没有链接可以说哪个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分钟前的图像” - 你实际上可以影响Jqueryui插入占位符ul的位置：

启动自动填充时使用“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" );