jQuery UI自动完成宽度问题

Question

请查看此http://jsfiddle.[net]/Nkkzg/108/（不允许JsFiddle喜欢），并在自动完成文本框中输入“ Apple”。您会看到一个长字符串出现，并且该页面的水平滚动条也出现了，这很烦人。我想在不设置宽度的情况下显示完整的字符串结果，您可以看到自动完成结果div根据字符串长度从左上角到最大右数显示。我们如何在页面中央（如输入文本框）显示结果，以免出现水平滚动条。

任何帮助将不胜感激。

谢谢和问候。

Answer 1

您应该尝试使用position:absolute

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

Live Demo

Answer 2

根据本文：

jQuery UI Autocomplete Width Not Set Correctly

似乎您需要将所有内容都放置在容器中，并指定appendTo属性来告诉它将菜单放在何处。

Answer 3

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

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

通过这种方式，自动完成功能将获得您根据封闭的span标签上的styleClass对其进行样式设置的宽度