关闭 jQuery UI 自动完成中的 element.style

发布于 2024-10-18 06:51:24 字数 184 浏览 6 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我家小可爱 2024-10-25 06:51:24

这是我的方法。我创建了另一个元素并“隐藏”了自动完成结果。为了触发自动完成中的正常事件，您可以将自动完成结果容器设置为宽度和高度为 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'));
};

Here is my approach. I created another element and "hid" the autocomplete results. In order to trigger the normal events in autocomplete, you can set the autocomplete-results container to a width and height of 0 with a float (not sure if thats needed) and set the overflow to hidden. When the drop item container would appear, I clear out my result container. When the item gets rendered, the _renderItem function, I append it to my result container.

$('#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 原文

静水深流 2024-10-25 06:51:24

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

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

the results box that the plugin generates is fully themeable. Every element has a class name attached to it as per below

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

All you have to do is create a style sheet and define the properties of every class.

check the "Themeing" tab on this link http://jqueryui.com/demos/autocomplete/

回复收藏 0 原文

~没有更多了~