jQuery Autocomplete Plugin 1.2.3 响应式宽度下拉答案

【问题标题】：jQuery Autocomplete Plugin 1.2.3 responsive width dropdownjQuery Autocomplete Plugin 1.2.3 响应式宽度下拉
【发布时间】：2015-01-14 10:37:03
【问题描述】：

有人在 github 中使用过这个自动完成插件吗？当您调用自动完成功能时，您可以传递下拉框的宽度变量（以像素为单位），即“width:200”。

我希望下拉菜单与输入字段的大小相同。当您知道输入字段的宽度时，这可以正常工作，但是当使用根据您使用的设备改变宽度的响应式输入字段时，您将如何将其设置为当前输入字段的宽度？

【问题讨论】：

标签： jquery css jquery-plugins autocomplete

【解决方案1】：

我尝试了很多不同的方法来解决这个问题。我认为我遇到的最佳解决方案是将宽度设置为非常小的尺寸，它实际上会调整/调整到更大的然后分配的宽度。

示例 CSS：

.ui-autocomplete {
    max-height: 400px;
    width: 200px; /* just setting it very small it will resize to the input field*/
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    z-index: 1000;
}

【讨论】：

这应该是公认的答案。纯 CSS，没有 javascript。

【解决方案2】：

如果你在谈论这个插件：https://github.com/devbridge/jQuery-Autocomplete。

我遇到了同样的问题并采取了解决方法。我将宽度设置为固定值，如下所示：

$('#input').autocomplete({
    width: 780
});

然后，每当页面调整大小时，我都会运行此函数：

function page_resize(){
    $('.autocomplete-suggestions').css('width', $('#input').width());
}

【讨论】：