jQuery UI 自动完成宽度问题答案

【问题标题】：jQuery UI Autocomplete Width issuejQuery UI 自动完成宽度问题
【发布时间】：2013-07-05 04:52:30
【问题描述】：

请看http://jsfiddle.[net]/Nkkzg/108/（所以不允许喜欢 JsFiddle）并在自动完成文本框中写下“Apple”。您可以看到出现了一个长字符串，并且该页面的水平滚动条也出现了，这非常烦人。我想在不设置宽度的情况下显示完整的字符串，您可以看到自动完成结果 div 根据字符串长度从左角到最大右侧显示。我们怎样才能像输入文本框一样在页面中心显示结果，这样就不应该出现水平滚动条。

我们将不胜感激。

感谢和问候。

【问题讨论】：

添加jsFiddle链接时，必须提供格式化示例代码。

标签： jquery-ui css jquery-ui-autocomplete

【解决方案1】：

根据这篇文章：

jQuery UI Autocomplete Width Not Set Correctly

看起来你需要将所有东西都放在一个容器中，并指定 appendTo 属性告诉它把菜单放在哪里。

【讨论】：

【解决方案2】：

你应该尝试使用position:absolute

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    border:1px solid #222;
    position:absolute;
  }

Live Demo

【讨论】：

【解决方案3】：

您可以尝试将其放入您的 .css 文件中

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

通过这种方式，自动完成获取的宽度是您根据封闭跨度标记上的 styleClass 设置样式的宽度

【讨论】：