Question

我对Jquery自动完成有一个令人沮丧的问题。我有输入下方的UL下拉选项。使用ui-menu呈现ui-menu-items和width:1214px - 我认为这是文档宽度或其他内容。我不知道为什么会这样，但我可以覆盖CSS来修复它。

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

DOM浏览器中的所有ul和li高度都设置为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

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

z-index:999 or z-index:1000

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

一旦用户点击输入字段：

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

当输入字段失去焦点时：

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

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

Answer 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>

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

2 个答案: