Jquery 自动完成样式

发布于 2024-10-17 20:30:49 字数 411 浏览 2 评论 0原文

在设计 jQuery 自动完成插件的样式时，我将以下 HTML 代码硬连线到我的页面：

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul>

How can I disable style from being made through HTML and keep it done via CSS?我不认为我的 CSS 文件会覆盖该样式。

任何帮助都会做

原文

While styling the jQuery autocomplete plugin, I get the following HTML code hardwired to my page:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul>

How can I disable styling from being made through HTML and keep it done via CSS? I don't think my CSS files are overwriting that style.

Any help will do

分享到QQ

分享到微博

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

发布评论

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

南风起 2024-10-24 20:30:49

jQuery 自动完成需要设置一些内联样式，将下拉列表放置在文本框下方，并使其大小相等。

它不设置任何其他内容，因此完全由您通过设置添加到其中的类的样式（即 ui-autocomplete）来提供它的视觉样式。

建议

我想告诉您的是：设置显示的下拉列表的视觉效果，并且不必担心内联样式的定位和大小。

需要更改定位

如果您确实需要覆盖此元素的定位和大小，您可以随时将样式设置为 !important。

ul.ui-autocomplete
{
    position: absolute;
    left: 100px!important;
    top: 0!important;
    ...
}

附加编辑

设置 margin-top 不会执行任何操作，因为它每次显示下拉菜单时都会计算位置。但你可以尝试设置这个：

.ui-autocomplete
{
    border-top:5px solid transparent!important;
}

这实际上可以解决问题。

jQuery autocomplete needs to set some inline styles to position the drop down list under the text box and size it equally.

It doesn't set anything else, so it's completely up to you to provide visual styling of it by setting styles of those classes that are added to it (ie. ui-autocomplete).

Advice

What I'm trying to tell you is this: set the visual aspects of the drop down list that gets displayed and don't worry about positioning and sizing inline styles.

Need to change positioning

If you do need to override positioning and sizing of this element you can always set your styles as !important.

ul.ui-autocomplete
{
    position: absolute;
    left: 100px!important;
    top: 0!important;
    ...
}

Additional edit

Setting margin-top doesn't do anything since it calculates position every single time it displays the drop down. But you can try setting this:

.ui-autocomplete
{
    border-top:5px solid transparent!important;
}

This actually does the trick.

回复收藏 0 原文

逐鹿 2024-10-24 20:30:49

这可以通过对自动完成的“打开”方法进行一些更改来完成。

考虑这个例子：

$('#search_text_box').autocomplete({
        source: "<?= $this->baseUrl('items/autocomplete');?>",
        minLength: 2,
        search: function(){
            //$ulForResults.empty();
        },
        'open': function(e, ui) {
            $('.ui-autocomplete').css('top', $("ul.ui-autocomplete").cssUnit('top')[0] + 4);
            $('.ui-autocomplete').css('left', $("ul.ui-autocomplete").cssUnit('left')[0] - 2);
            $('.ui-autocomplete').append("<div id='autofill_results'><span>2,000</span> results found, showing <span>10</span></div>");
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + item.name + "</a>" ).appendTo( ul );
    };

通过这种方式改变自动完成的显示方式和位置。显示自动完成信息的“ul”具有“ui-autocomplete”类，您可以在此函数中操作其 css，以按照您想要的方式显示下拉列表。

This can be done by implementing some changes in the "open" method of Autocomplete.

consider this example:

$('#search_text_box').autocomplete({
        source: "<?= $this->baseUrl('items/autocomplete');?>",
        minLength: 2,
        search: function(){
            //$ulForResults.empty();
        },
        'open': function(e, ui) {
            $('.ui-autocomplete').css('top', $("ul.ui-autocomplete").cssUnit('top')[0] + 4);
            $('.ui-autocomplete').css('left', $("ul.ui-autocomplete").cssUnit('left')[0] - 2);
            $('.ui-autocomplete').append("<div id='autofill_results'><span>2,000</span> results found, showing <span>10</span></div>");
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + item.name + "</a>" ).appendTo( ul );
    };

In this way by changing how and where your autocomplete appears. The 'ul' that shows autocomplete info has class 'ui-autocomplete' you can manipulate its css in this function to show the drop down the way you want.

回复收藏 0 原文

~没有更多了~