如何在 Jquery ui 自动完成中自行设置建议的位置和宽度？答案

【问题标题】：How can I setting the position and width of suggestions in my own in Jquery ui autocomplete?如何在 Jquery ui 自动完成中自行设置建议的位置和宽度？
【发布时间】：2013-04-05 15:34:05
【问题描述】：

我是 jquery ui 自动完成的新手！

我发现弹窗建议的宽度和自动补全插件绑定的输入框一样，但是我在建议中的内容可能会更长比建议弹出列表窗口的宽度。很明显，宽度和位置是由自动完成插件计算的，那么，有没有办法将弹出建议的宽度设置为自动适应我的内容的宽度？

非常感谢~~！！

【问题讨论】：

标签： jquery user-interface autocomplete

【解决方案1】：

尝试挂钩自动完成小部件提供的open 事件。在那里，您可以获得对包含建议的 div 的引用并设置它的宽度。

例如以下代码对我有用，只是在上面链接的页面上使用 Firebug 添加它：

$( "#tags" ).bind( "autocompleteopen", function(event, ui) {
    var $suggestionsDiv = $(event.target).autocomplete('widget');
    $suggestionsDiv.css('width', 'auto'); // may not work cross browser
});

正如 cmets 中所述，这可能不是 100% 跨浏览器兼容（我经常在 IE 上遇到width: auto 问题，尤其是在页面加载后动态），但你明白了。

【讨论】：

【解决方案2】：

我知道我的变种不是你想要的，但我很累找到解决我的情况的方法，这与你的非常接近，最后我得到了它。所以可能我的解决方案可以帮助某人。

我只想将建议列表的宽度设置为与输入字段的宽度相同。我们有那个 id 吗？是的..如果建议列表是静态的，我们有一个像#ui-id-1这样的静态ID，但是如果我们动态添加了列表 - 就会生成像#ui-id-4598这样的ID...

我没有找到这样的动态 id 是在哪里以及如何生成的，所以我有一点 jQuery 解决方案：

$('.ui-combobox-input').bind('click autocompleteopen', function(){
    var elementWidth = $(this).closest('.ui-combobox').css('width');
    //set suggestion list width
    $('ul.ui-autocomplete:visible').css({"width": elementWidth});
});

请注意，如果此时只有一个建议列表处于活动状态，此变体将起作用。

【讨论】：