Question

我正在寻找自定义jquery UI自动完成结果的CSS。问题在于，只要将查询输入到输入框中，插件就会自动生成动态元素样式（例如，宽度，顶部，左侧，右侧值）。

我不想要任何元素样式，我不知道如何在插件的代码中更改它。有任何想法吗？或者，也许有一种方法可以用不同的CSS覆盖元素样式，而无需更改插件代码。这样的想法也会受到欢迎。

Answer 1

这是我的方法。我创建了另一个元素并“隐藏”了自动完成结果。为了在自动完成中触发正常事件，您可以使用float将autocomplete-results容器设置为宽度和高度为0（不确定是否需要）并将溢出设置为隐藏。当drop item容器出现时，我清除了我的结果容器。当项目被渲染时，_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'));
};

Answer 2

插件生成的结果框是完全可主题化的。每个元素都附有一个类名，如下所示

 <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/

上的“主题”标签

在jQuery UI Autocomplete中关闭element.style

2 个答案: