jQueryUI的自動填充：固定

我在通過施加到div的CSS屬性position到fixed獲得的網頁具有「模式窗口」。 div包含輸入字段。具體來說，我使用的自動填充小部件從jQueryUI。有兩個主要問題：jQueryUI的自動填充：固定

1）第一個問題是，由於div具有固定位置，因此當您向下滾動網頁時，自動填充建議不會固定顯示，而會隨頁面上下移動。你可以在這個Codepen看到這個問題，我使用的是一個來自jQuery網站和城市名稱自動完成的例子。

2）第二個問題是，自動完成的建議顯示在頁面的左上角，而不是輸入欄的下方。不幸的是，我試圖在Codepen中重現這個問題，但我不能。

我很確定問題出在CSS上，特別是JQuery-UI提供的這種樣式屬性。也許問題可以通過使用自動填充小部件的position option來解決。

我應該定義什麼CSS屬性以及如何定義？

PS：我使用的主題是http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css。

來源

2012-09-02 JeanValjean

看看jQuery UI庫，我看到< ul>元素用於顯示建議。 jQuery UI默認將此元素附加到HTML文檔，而不是< div>（用作「模式窗口」）的文本輸入。

然而，文檔顯示該選項appendTo提供配置該元件自動完成< UL>應附加到。它使用jQuery的appendTo()函數。 http://jqueryui.com/demos/autocomplete/#option-appendTo

所以，我包括一個div來包含建議：

<input type="text" id="myInput" /> 
<div id="container"> 
</div>

而在autocomplete()功能我添加了一些選項：

appendTo: "#container"

然後添加以下CSS

#container { 
    display: block; 
    position:relative 
} 
.ui-autocomplete { 
    position: absolute; 
}

就是這樣！

來源

2012-09-02 13:52:37 JeanValjean

感謝您分享您的答案。剛剛對'appendTo'使用了類似的修復方法，以解決自動填充建議將顯示在框架集錯誤位置的問題 - 基於閱讀您的答案。 :) – kontur

不要提及它;） – JeanValjean

它並沒有解決我的問題，但每個試圖解決這個問題的人都只是檢查你是否有最新的'jquery-ui'版本。最初我的版本是'1.8.bla'，並且是錯誤的，但是在我更新爲'1.10.2'後，所有工作都完成了。 – Kuncevic

也有同樣的問題。刪除jquerUI基本主題，卸載jqueryUI庫，然後重新安裝jqueryUI，現在工作正常。不知道你在做什麼，但我在MVC4這麼多的錯誤，我要殺了自己。祝你好運。

編輯：這是真正的問題

在尋找一箇舊的項目，看看是否被自動完成工作，我們發現，許多在舊項目的樣式都不在較新的。不知道我是否抹去了他們，但無法想象這樣做。我所要做的只是複製和粘貼新項目中缺失的那些類，一切都恢復正常。我認爲有人破壞我的項目。

來源

2013-08-12 22:18:07 rogerthat

確保只閱讀@ Riapp的回答後加載的jQuery一個版本和UI 我發現了這一個，我打了四周，可以看到，你需要配套的版本號，從來沒有太多....

否則，自動完成將是一個絕對的，並飛往頂部。

<script type="text/javascript" 
    src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" 
    href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />

來源

2015-05-09 00:25:27 Mikeys4u

jQueryUI的自動填充：固定

回答

相關問題