Question

我想在每个页面上对每个jQuery的自动完成插件实例进行不同的设置。除了我无法弄清楚如何为每个实例设置不同的样式。我似乎无法将div中的ac_ *样式包装起来以从CSS中识别它们。我所做的每一项改变都会影响到有什么想法吗？

谢谢。

Answer 1

使用appendTo选项将自动填充列表放置到某个自定义容器而不是body。然后你可以设计它。例如：

JS：

$('#suggestions').autocomplete({source: get_suggestions, appendTo: '#my-suggestions'})

HTML：

<input type="text" id="suggestions">
<div id="my-suggestions"></div>

CSS：

#my-suggestions {
  position: absolute;
}

#my-suggestions .ui-autocomplete {
   foo: bar;
}

Answer 2

http://api.jqueryui.com/autocomplete/#method-widget

添加如下内容：

selector.autocomplete( "widget" ).addClass('yourclass');

Answer 3

我刚刚发现，如果您使用的是jQuery UI 1.8，则可以轻松获取UL容器。要在1.8中获取UI容器，只需将以下内容添加到open方法中：

var $myAcInput = $("#my-acomplete-input");

...
$myAcInput.autocomplete({
  open : function(event, ui) {
    // Grab the widget that just opened:
    var $resultsContainer = $formsInput.autocomplete("widget");
    // Add a custom rendering class and use tht to style your subelements
    $resultsContainer.addClass("my-custom-results-container-class");              
    // Position the container wherever you want:
    $resultsContainer.position({at: "center bottom", 
                                my:"center top", 
                                collision: "fit", 
                                of: "#my-acomplete-input"});            
  }
  source :  etc etc etc
});

Answer 4

解决方案非常简单：

$( "#target-input" ).autocomplete({
    open:function( event, ui ) {
      $('.ui-autocomplete.ui-menu').addClass('yourClass');
    },
    close:function( event, ui ) {
      $('.ui-autocomplete.ui-menu').removeClass('yourClass');
    }
});

你可以把任何代码放到.yourClass

类

Answer 5

您可以重写_renderMenu方法。以http://jqueryui.com/demos/autocomplete/#combobox为例。

selector.data("autocomplete")._renderMenu=function(ul, items){
//do something here..
}

Answer 6

我想您会发现您的问题是自动填充下拉列表未放置在占位符内...示例：

<div class="differentStyle">
    <input type="text" class="autocomplete">
</div>

当结果返回时，会在页面中添加一个新div以显示结果 - 但不会在“differentStyle”分区内。它只是被添加到DOM的末尾。例如：

<div class="differentStyle">
    <input type="text" class="autocomplete">
</div>

...
<div class="ac_results">I get added by jQuery Autocomplete!</div>
</body>

阅读文档，我会说它会覆盖同一页面上两个自动完成框的样式：

http://docs.jquery.com/Plugins/Autocomplete

Answer 7

当我在这篇文章中发生时正在寻找别的东西...... 我设法通过捕获以下自动完成事件并将我自己的类添加到包含自动完成输出的外部来实现此目的。然后使用CSS根据需要格式化元素。希望这有助于某人。

$input.autocomplete({
            focus : function(event, ui) {
              $(".forms-search-result").parents("ul").addClass("myClass");
              return false;
            },
            open : function(event, ui) {
              $(".forms-search-result").parents("ul").addClass("myClass");
            },

示例css：

.myClass a.ui-corner-all { font-weight:bold; }

同样作为我的JSON结果的一部分，我只是传回（来自我的JAVA AJAX Action）HTML shell，其结果嵌入其中，作为实际JSON“结果”的一部分。这样我就可以围绕每个结果创建精细的HTML，然后使用上面的方法按照我想要的方式格式化它们。

Answer 8

在较新版本中添加了“appendTo”，允许您为建议列表选择父元素。您可以为列表创建不同的父母（带有in或class）。

Answer 9

当我遇到这个问题时，我发现，jquery-ui为每个实例提供了一个唯一的id，即＃ui-id-1，＃ui-id-2，其中dom中的第一个自动完成得到数字1，第二个数字2，依此类推。因此，如果已知自动复合的顺序，则可以将不同的样式应用于不同的ID。

一个页面上有多个jQuery自动完成实例

9 个答案: