Jquery自动完成导致页面不必要地滚动答案

【问题标题】：Jquery autocomplete causing page to scroll unnecessarilyJquery自动完成导致页面不必要地滚动
【发布时间】：2026-01-01 09:40:01
【问题描述】：

Jquery 自动完成有一个令人沮丧的问题。我有 UL 下拉选项出现在输入下方。 ui-menu 和 ui-menu-items 正在使用 width:1214px 呈现 - 我假设这是文档宽度或其他东西。我不知道为什么会发生这种情况，但我可以覆盖 CSS 来修复它。

固定宽度会导致结果列表中出现换行符，这很好。有限的结果列表仍然很容易适合页面，但由于某种原因页面高度被抛出，我得到一个垂直滚动条。

所有ul 和li 高度在DOM 资源管理器中都设置为auto - 为什么会导致页面滚动？

有哪些解决方法可以将自动完成框保留在行内？

CSS：

.ui-menu {
  ...
  width:245px;
}
.ui-menu-item{
  cursor:pointer;
  list-style: none;
  ...
  width:245px;
}

JS：

$.ui.autocomplete.prototype._renderMenu = function( ul, items ) {
  var self = this;
  $.each( items, function( index, item ) {
    if (index < 10)
      {self._renderItem( ul, item );}
  });
}

输入：

<input type="text" class="Search" id="search_box"/>

【问题讨论】：

标签： jquery css autocomplete resize

【解决方案1】：

尝试设置/覆盖搜索下拉列表的 z-index：

z-index:999 or z-index:1000

我不确定，但它会有所帮助。另一种解决方案是在用户搜索时将溢出设置为隐藏：

所以只要用户点击输入框：

$("html,body").css("overflow","hidden");

当输入框失去焦点时：

$("html,body").css("overflow","auto");

但这对我来说似乎很奇怪，因为 jQuery UI 应该可以正常工作。

【讨论】：

overflow-y:hidden 是一个完美的解决方法。如果我发现问题，我会暂时使用它并更新问题。
绑定搜索隐藏设置溢出和绑定自动设置溢出自动非常适合我，谢谢。

【解决方案2】：

我使用appendTo 初始化选项解决了这个问题。我认为问题在于绝对位置自动完成菜单仍在增加主体的高度：通过将 appendTo 选项设置为带有height: 0px 的 div，我能够消除该问题。

例子：

Javascript：

$( ".selector" ).autocomplete({
  appendTo: "#hidden-stuff"
});

HTML：

<body>
  <input class="selector" type="text>
  <div id="hidden-stuff" style="height: 0px;"></div>
</body>

【讨论】：