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