jQuery UI 自动完成宽度未正确设置

Posted

技术标签:

【中文标题】jQuery UI 自动完成宽度未正确设置【英文标题】:jQuery UI Autocomplete Width Not Set Correctly 【发布时间】:2011-08-04 08:47:00 【问题描述】:

我已经实现了一个 jQuery UI 自动完成框,而不是文本框的宽度,下拉选项正在扩展以填充页面的剩余宽度。

看看这个例子自己看看:http://jsbin.com/ojoxa4

我尝试在创建列表后立即设置它的宽度,如下所示:

$('.ui-autocomplete:last').css('width',
                               $('#currentControlID').width()
                              );

这似乎没有任何作用。

我也尝试过使用页面样式设置宽度:

ui-autocomplete  width: 500px; 

这确实有效,令人惊讶的是,但这意味着页面上的所有自动完成都必须具有相同的宽度,这并不理想。

有没有办法单独设置每个菜单的宽度?或者更好的是,谁能解释为什么我的宽度不能正常工作?

【问题讨论】:

@hmoyat 的答案应该是被接受的答案。 【参考方案1】:

如果你喜欢使用 css 试试这个:

.ui-widget-content.ui-autocomplete 
    width: 350px;

它适用于每个自动完成输入。

【讨论】:

【参考方案2】:

在open事件中设置css!

$('#id').autocomplete(
    minLength: 3,
    source: function(request, response) 
        $.ajax(
                    url: "myurl",
                    dataType: "json",
                    type: 'POST',
                    data: 
                        'q': request.term,

                        'maxRows': 15
                    ,
                    success: function(data) 

                        response($.map(data, function(item) 
                            return 
                                label: item.name,
                            
                        )),
                    
                )
            ,
            select: function(event, ui) 
                $("#id").val(ui.item.label);
            ,
            focus: function ( event, ui )
                $form.find('#id').val(ui.item.label);
                return false;
            ,
            open: function()
                $('.ui-autocomplete').css('width', '300px'); // HERE
            
        )

【讨论】:

我这样做了,我实际上把结果放在了一个div中并设置了位置。它适用于除 IE7 和 IE9 兼容性视图之外的其他浏览器。这是为什么?我是这样做的,appendTo: "#results", open: function() var position = $("#results").position(), left = position.left, top = position.top; $("#results > ul").css(left: (left + 15) + "px", top: (top + 30) + "px", width: (206) + "px" ); , 您可能还需要重置max-width【参考方案3】:

我遇到了同样的问题,并通过使用这段代码解决了它,虽然它是一个有点受欢迎和试用的东西,但它有效,我无法设置宽度,所以我决定设置 @ 987654321@财产。

  $('.ui-autocomplete').css('margin-left','25%') //center align
  $('.ui-autocomplete').css('max-width','38%') //hit and trial
  $('.ui-autocomplete').css('min-width','38%') //hit and trial

看看什么最适合你。希望这会有所帮助。

【讨论】:

【参考方案4】:

$("#autocompleteID").autocomplete(
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)

   $("#autocompleteID").autocomplete ("widget").css("width","300px");  
 
);

【讨论】:

【参考方案5】:

我知道这个问题早已得到解答,但我认为有更好的解决方案

$(".autocomplete").autocomplete(
    ...
    open: function() 
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    
    ...
);

对我来说效果很好。

【讨论】:

非常好的解决方案!谢谢! 不错的解决方案,请注意,它接受输入参数,因此请在使用前阅读手册 - 例如,如果您在一页上没有一个自动完成时编写函数。 这应该是默认行为【参考方案6】:

我的 css 文件中有这个,所以自动完成功能采用 width 样式的 span

 span input.ui-autocomplete-input 
     width: 100%;
 

【讨论】:

请注意,您发布的实施信息不足。作者有自己的html,你的风格不符合他的要求。【参考方案7】:

我的解决方案是将自动完成附加到带有 id 的 div,然后他们为特定的 ul 设置 CSS:

jQuery/javascript

$("input[name='search-text]").autocomplete(
    appendTo: "#item-search-autocomplete",
    source: ....
);

CSS:

#item-search-autocomplete .ui-autocomplete 
    width: 315px;

像魅力一样工作。

【讨论】:

【参考方案8】:

我使用这个插入式解决方案

jQuery.ui.autocomplete.prototype._resizeMenu = function () 
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());

这基本上是@madcapnmckay的解决方案,但不需要更改原始来源。

【讨论】:

这应该是公认的解决方案 - 因为它是最简单且最无侵入性的 我认为这是最好的答案,因为它适用于所有 jquery 自动完成声明,而且很清楚! 不知道这段代码究竟做了什么——但它“神奇地”将自动完成宽度调整为相关输入框的宽度;就像它最初应该可以工作,但在很多情况下都不能工作。 嘿,谢谢你的回答。您能否更深入地了解代码的确切作用,以便我找出它的最佳位置是什么?它是否覆盖了_resizeMenu 函数?我将它放置在一个脚本中,该脚本在我的 Web 应用程序的每个页面上运行一次,您对更好的放置有什么建议吗?谢谢。 element.autocomplete('instance')._resizeMenu 更好,因为您可以仅覆盖实例。而不是覆盖同一页面上的任何其他自动完成。【参考方案9】:

好吧,安德。我不知道我的解决方案是否可以帮助您,但是使用 Jqueryui remote-with-cache.html 它可以工作。我只是在文本框中输入了size 属性。

请看下面的代码:

<div class="demo">
    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds" size="30"/>
    </div>
</div>

【讨论】:

【参考方案10】:

如果您无法动态设置宽度并且没有任何效果,请尝试包含此

http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

在链接表中或硬编码并在此处设置参数。

尝试了其他所有方法后它对我有用

【讨论】:

您链接到的 jquery.ui.autocomplete.css 文件中有意义的部分是 @andrius-chamentauskas 上面指出的位置:绝对值。以下为我修复了它: .ui-autocomplete position: absolute; 【参考方案11】:

我知道很久以前就已经回答了,但我遇到了同样的问题。我的解决方案是添加 position:absolute

【讨论】:

为他人澄清: .ui-autocomplete position: absolute; 这完全适合我。从字面上破解!important 和宾果班戈,快乐的老板。 #dontVoteTrump #actuallyMakeAmericaGreatAgain 这个答案应该有更多的选票。其他一些回复对我来说似乎是非常老套的解决方案。【参考方案12】:

我知道这个问题早已得到解答,但我发现最简单的方法是使用自动完成的 id,并将宽度设置为 100px,您可以调用

$('.ui-autocomplete-input#MyId').css('width', '100px');

在您完成$('#MyId').autocomplete(...); 通话后。这样,您最终不会将 DOM 中的自动完成文本框的顺序绑定到您的脚本。

【讨论】:

【参考方案13】:

如果您使用的是官方的 jQuery ui 自动完成功能(我使用的是 1.8.16)并且想要手动定义宽度,您可以这样做。

如果您使用的是缩小版(如果不是,则通过匹配 _resizeMenu 手动查找),查找...

_resizeMenu:function()var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))

...并将其替换为 (add this.options.width|| before Math.max) ...

_resizeMenu:function()var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))

...你现在可以在 .autocomplete(width:200) 函数中包含一个宽度值,jQuery 会支持它。如果没有,它会默认计算它。

【讨论】:

【参考方案14】:

我也遇到了这个问题,但意识到我只是忘记包含对 jquery.ui.autocomplete.css 样式表的引用。您是否在布局/母版页中包含该样式表?

【讨论】:

这对我来说是个问题——我怀疑对大多数人来说也是如此。大家是不是觉得jQ UI默认就这么破? ;) 或者将以下内容添加到您的 CSS 中,因为这就是该文件中的全部内容:.ui-autocomplete position: absolute; top: 0; left: 0; cursor: default; 有些人可能已经忘记了,但有些人实际上遇到了其他答案中解释的错误/问题【参考方案15】:

我在自动完成代码中进行了挖掘,罪魁祸首是这个小麻烦

_resizeMenu: function() 
    var ul = this.menu.element;
    ul.outerWidth( Math.max(
        ul.width( "" ).outerWidth(),
        this.element.outerWidth()
    ) );
,

我不确定 ul.width("") 应该做什么,但 ui.width("").outWidth() 总是返回正文的宽度,因为这是 ul 附加到的。因此,宽度永远不会设置为元素宽度......

无论如何。要修复,只需将其添加到您的代码中

$element.data("autocomplete")._resizeMenu = function () 
        var ul = this.menu.element;
        ul.outerWidth(this.element.outerWidth());

这是一个错误吗?

编辑: 万一有人想看到 here 错误的简化测试用例。

【讨论】:

有人关闭了它...不知道为什么。我在最新的 JQuery UI 中仍然遇到这个问题。 他说显然我们应该包含某些 css 文件。它没有记录,对我来说似乎有点傻,因为它可以根据输入计算出宽度,而不需要外部样式。 我自己花了一些时间研究这个并发现了一些事情: 1. ul.width( "") 调用是删除之前对菜单元素所做的任何显式宽度设置。 2.必须包含CSS才能正常工作,因为基本CSS在.ui-menu元素上设置了float: left,因此,在计算宽度时,ul.width( "" ).outerWidth()会考虑任何超长结果的宽度,否则它会占用input 元素。 @madcapnmckay 一种更简单的方法是以插入方式使用您的技术:***.com/a/11845718/346005【参考方案16】:

自动完成有一个宽度选项。我将它用于 1.3.2。

$('#mytextbox').autocomplete(url,   
        width: 280,
        selectFirst: false,
        matchSubset: false,
        minChars: 1,
        extraParams:myextraparam:myextraparam,
        max: 100
    );

【讨论】:

您必须使用其他一些自动完成插件。 jQuery UI 没有这样的选项:jqueryui.com/demos/autocomplete/#options 实际上,我正在使用带有jquery.autocomplete.min.js 1.0.2 的jquery 1.3.2。如果你查看 jquery.autocomplete.min.js 的宽度,你会看到这一行:if(options.width&gt;0)element.css("width",options.width); 这设置了自动完成的宽度。【参考方案17】:

事实证明,问题在于菜单正在扩展以填充其父元素的宽度,默认情况下是主体。这可以通过给它一个正确宽度的包含元素来纠正。

首先我添加了一个&lt;div&gt;,如下所示:

<div id="menu-container" style="position:absolute; width: 500px;"></div>

绝对定位允许我在输入后立即放置&lt;div&gt;,而不会中断文档流。

然后,当我调用自动完成功能时,我在选项中指定了一个appendTo 参数,导致菜单被附加到我的&lt;div&gt;,从而继承它的宽度:

$('#myInput').autocomplete( source: ..., appendTo: '#menu-container');

这解决了问题。但是,我仍然想知道为什么这是必要的,而不是插件正常工作。

【讨论】:

我遇到了完全相同的问题。查看 Jquery UI 站点上的示例并尝试复制,我看不出我在做什么不同。是我还是“新”的官方自动完成功能比 Jorn 的旧版本更糟糕? 建议使用 appendTo 选项,即使宽度不是问题。它将允许您重用具有不同样式和选项的小部件,而不是将它们全部浮动在文档底部。 抱歉,否决了这个,Arnaud 的回答要好得多。 @DavidGrenier 我不相信投票一个答案,因为另一个答案更好是公平的。除非您有特定原因认为此答案无用。我认为最好通过投票来表明您对另一个问题的偏好,但我相信您已经这样做了:) ***.com/help/privileges/vote-down 这是最好的解决方案

以上是关于jQuery UI 自动完成宽度未正确设置的主要内容,如果未能解决你的问题,请参考以下文章

单独更改 jquery-ui 自动完成小部件的宽度

自动完成下拉菜单未正确显示

jQuery UI 自动完成 - 未找到结果

如何为 Kendo UI 自动完成控件设置宽度

JQuery UI 自动完成未达到 ActionResult C# MVC

jQuery UI 自动完成 - 西班牙语字符在本地正确显示,但在服务器上不正确