jQuery UI 自动完成宽度设置不正确 [英] jQuery UI Autocomplete Width Not Set Correctly

问题描述

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

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

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

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

这似乎什么也没做.

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

ui-autocomplete { width: 500px;}

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

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

解决方案

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

首先我添加了一个

像这样:

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

绝对定位允许我在输入之后立即放置

，而不会中断文档流.

然后，当我调用自动完成功能时，我在选项中指定了一个 appendTo 参数，从而将菜单附加到我的

，从而继承它的宽度:

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

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

I have implemented a jQuery UI Autocomplete box, and rather than being the width of the textbox, the dropdown options are expanding to fill the remaining width of the page.

Have a look at this example to see it for yourself: http://jsbin.com/ojoxa4

I have tried setting the width of the list immediately after creating it, like so:

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

This appears to do nothing.

I have also tried setting the width using on-page styles:

ui-autocomplete { width: 500px; }

This DOES work, amazingly, however it would mean that all autocompletes on a page would have to be the same width, which is not ideal.

Is there a way to set the width of each menu individually? Or better, can anyone explain why the widths are not working correctly for me?

解决方案

It turns out the problem is that the menu is expanding to fill the width of its parent element, which by default is the body. This can be corrected by giving it a containing element of the correct width.

First I added a <div> like so:

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

The absolute positioning allows me to place the <div> immediately after the input without interrupting the document flow.

Then, when I invoke the autocomplete, I specify an appendTo argument in the options, causing the menu to be appended to my <div>, and thus inherit its width:

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

This fixes the problem. However, I'd still be interested to know why this is necessary, rather than the plug-in working correctly.

这篇关于jQuery UI 自动完成宽度设置不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！