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

问题描述

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

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.

在这个例子中有一个看看，看看它自己： http://jsbin.com/ojoxa4

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()
                              );

这显得无可奈何。

我也曾尝试利用机页面样式设置宽度：

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.

首先，我添加了一个＆LT; D​​IV＆GT; 像这样：

First I added a <div> like so:

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

绝对定位可以让我放在＆LT; D​​IV＆GT; 后，立即输入，而无需中断文档流

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

然后，当我调用自动完成，我指定的选项的 appendTo 参数，导致菜单被附加到我的＆LT; D​​IV＆GT ; ，从而继承其宽度：

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