Question

请看这个http://jsfiddle。[net] / Nkkzg / 108 /（SO不允许喜欢JsFiddle）并在自动完成文本框中写'Apple'。您可以看到出现一个长字符串，并且该页面的水平滚动条也会出现，这非常烦人。我想在不设置宽度的情况下显示完整字符串，您可以看到自动完成结果div显示从左角到最大，具体取决于字符串长度。我们如何在输入文本框的页面中心显示结果，以便不应出现水平滚动条。

任何帮助都会非常明显。

谢谢和问候。

Answer 1

根据这篇文章：

jQuery UI Autocomplete Width Not Set Correctly

看起来您需要将所有内容放在容器中并指定appendTo属性，告诉它放置菜单的位置。

Answer 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

Answer 3

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

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

通过这种方式，自动完成功能可以根据封闭范围标记上的styleClass获得您设置样式的宽度

jQuery UI自动完成宽度问题

3 个答案: