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

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

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

<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