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

Question

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"/>

Answer 1

我使用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>

Answer 2

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

z-index:999 or z-index:1000

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

因此，只要用户单击输入字段：

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

当输入字段失去焦点时：

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

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

Answer 3

只需将位置：固定到 CSS 类ui-autocomplete 中，如下所示：

.ui-autocomplete  
{
    position: fixed; /* Prevents page scroll when autosuggestion menu appears */
}

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

问题描述

3 个解决方案

解决方案1
1 2015-06-12 00:59:51

解决方案2
1 已采纳 2011-04-05 05:43:04

解决方案3
0 2022-06-18 04:45:04

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

问题描述

3 个解决方案

解决方案1 1 2015-06-12 00:59:51

解决方案2 1 已采纳 2011-04-05 05:43:04

解决方案3 0 2022-06-18 04:45:04

解决方案1
1 2015-06-12 00:59:51

解决方案2
1 已采纳 2011-04-05 05:43:04

解决方案3
0 2022-06-18 04:45:04