如何使jquery自動完成不覆蓋其下的其他內容？

目前，我有一個文本框，在它的一些文字...我不想建議來隱藏我的基礎文本..我該怎麼辦呢？如何使jquery自動完成不覆蓋其下的其他內容？

編輯：

顯然，似乎問題並沒有告訴我想要的東西，所以這裏有雲：

我希望下面的<div>到一點點下移，隨便怎麼樣谷歌搜索與做工作「上的即時」 ......他們移動的結果向下放置的建議。

編輯：

什麼@thirtydot下面回答[接受的答案]工作還算不錯，
但我做了一些改變jQuery的UI的類爲我臨時做的工作。我曾在jQuery的CSS文件中刪除從ui-autocomplete類position: absolute;。這工作太...

來源

2011-03-02 Shrinath

應該怎樣，而不是發生？ – thirtydot 2011-03-02 12:53:23

您確定要將自動填充建議列表透明化（或在後臺）嗎？這將是一個爛攤子，爲用戶閱讀列表的內容... – Albireo 2011-03-02 12:57:48

@thirtydot，@kappa：看到谷歌搜索與_instant ON_如何做 – Shrinath 2011-03-02 12:58:33

Live Demo

我加入這個CSS：

#results { 
    position: relative 
}

，改變你的JavaScript是這樣的：

$("#tags").autocomplete({ 
    source: availableTags, 
    open: function(event, ui) { 
     $('#results').css('top', $('.ui-autocomplete').height() + 8); 
    }, 
    close: function(event, ui) { 
     $('#results').css('top', 0); 
    } 
});

來源

2011-03-02 13:33:29 thirtydot

Niiccceeeeee ..... Accepted !!! – Shrinath 2011-03-03 06:14:12

你可以做

.ui-widget-content { 
    background-color:transparent; 
}

來源

2011-03-02 12:54:39 chris

都能跟得上......不是透明的。請參見谷歌是如何在谷歌即時 – Shrinath 2011-03-02 12:58:51

顯示在絕對定位div的，建議列表。查看代碼並搜索CSS樣式。

的解決方案是將DIV添加到下面的文本字段的頁面的HTML代碼，並移除任何position: CSS樣式。由於它是空的，它不佔用任何空間。當添加內容時，它會根據需要增長。

來源

2011-03-02 13:11:24

做我不明白...你能請_jsfiddle_它嗎？你可以使用我在問題中發佈的版本並修改它並在這裏發回鏈接？ – Shrinath 2011-03-02 13:27:50

這可能需要一些調整，但它似乎工作。

$("#tags").autocomplete({ 
    source: availableTags 
}); 

$("#results").insertAfter(".ui-autocomplete");

來源

2011-03-02 14:21:14 chris

如何使jquery自動完成不覆蓋其下的其他內容？

回答

相關問題