7

我想在每个页面上以不同的方式设置 jQuery 自动完成插件的每个实例的样式。除了我不知道如何为每个实例设置不同的样式。我似乎无法将 ac_* 样式包装在 div 中以从 CSS 中识别它们。我所做的每一个改变都会影响两者。有任何想法吗？

谢谢你。

4

9 回答 9

16

使用该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;
}
于 2011-11-01T14:16:36.497 回答
5

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

添加如下内容：

selector.autocomplete( "widget" ).addClass('yourclass');
于 2010-10-08T07:32:00.273 回答
2

解决方案很简单：

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

您可以将任何代码放入类 .yourClass

于 2011-08-05T18:10:50.170 回答
1

我刚刚发现，如果您使用 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
});
于 2011-03-24T16:47:20.977 回答
1

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

selector.data("autocomplete")._renderMenu=function(ul, items){
//do something here..
}
于 2011-02-11T12:57:55.310 回答
0

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

于 2012-09-24T16:15:42.050 回答
0

当我遇到这篇文章时正在寻找其他东西......我设法通过捕获以下自动完成事件并将我自己的类添加到包含自动完成输出的外部类中来做到这一点。然后根据需要使用 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 操作）传回 HTML shell，其中嵌入了结果作为实际 JSON“结果”的一部分。这样我就可以围绕每个结果创建精细的 HTML，然后使用上述方法以我想要的方式格式化它们。

于 2010-07-28T18:36:47.103 回答
0

我想你会发现你的问题是自动完成下拉列表没有放在你的占位符内......例如：

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

当结果返回时，会在页面中添加一个新的 div 以显示结果 - 但不在您的“不同样式”分区内。它只是被添加到 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

于 2010-01-28T08:45:57.133 回答
0

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

于 2013-08-04T18:26:20.877 回答