jquery-ui - 在 jQuery UI 自动完成中,关闭 element.style

  显示原文与译文双语对照的内容
0 0

我正在想定制jquery自动完成ui结果的CSS 。 问题在于,只要在输入框中输入了查询,插件就会自动生成动态元素样式( 。比如,宽度,顶部,左,右值) 。

我不希望有任何元素样式,我也不确定如何在插入代码中改变它。 有什么想法或者,也许有办法通过不同的CSS来实现元素样式的转换,而不改变代码的插入。 同样也欢迎这样的想法。

时间: 原作者:

0 0

这是我的方法。我创建了另一个元素和"隐藏"的自动完成结果。 为了在自动完成中触发正常事件,你可以将自动完成结果容器设置为 0的宽度和高度,并将它的设置为隐藏( 不确定是否需要),并将溢出设置为隐藏。 当放置项容器出现时,我将清除结果容器。 将项目呈现给_renderItem函数时,将它的追加到结果容器中。


$('#faq-search').autocomplete({'source': questions}, {
 matchContains: true,
 appendTo:"#faq-search-results. autocomplete-results",
 change: function(e, ui){
 },
 close: function(e, ui){
 },
 search: function(e, ui){
 $('#faq-search-results> ul').empty();
 },
 select: function(e, ui){
 location.assign(ui.item.link);
 }
}).data("autocomplete" )._renderItem = function( ul, item ) {
 return $("<li></li>")
. data("item.autocomplete", item)
. append('<a href="'+ item.link +'">'+ item.value +'</a>')
. appendTo($('#faq-search-results> ul'));
};

0 0

插件生成的结果框是完全 themeable 。 每个元素都有一个附加到下面的类名


 <input class="ui-autocomplete-input"/>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
 <li class="ui-menu-item">
 <a class="ui-corner-all">item 1</a>
 </li>
 <li class="ui-menu-item">
 <a class="ui-corner-all">item 2</a>
 </li>
 <li class="ui-menu-item">
 <a class="ui-corner-all">item 3</a>
 </li>
</ul> 

只需要创建一个样式表并定义每个类的属性。

查看这里链接 http://jqueryui.com/demos/autocomplete/ 上的"themeing"选项卡。

原作者:
...