如果自動完成是在頁面的底部，自動完成選項浮動文本區域

上面，我們正在使用這種自動完成插件：jQuery AutoComplete 如果自動完成是在頁面的底部，自動完成選項浮動文本區域

然而，當輸入字段是在頁面的底部是一個問題。自動完成列表（一旦你開始輸入就會出現）將它的位置移動，以便代替放下文本框，它會漂浮在文本框上方。沒關係，如果列表中有很多項目。但是，如果選項很少且高度不夠，則輸入框與自動填充框之間會有很大差距。

這樣可以很清楚這裏的形象：

Auto Complete Box Problem

是否有人知道如何修改代碼，以便不會發生這種情況？或者讓AutoComplete始終保持在輸入框的底部，不管是什麼？

我覺得這是做了jQuery的部分是：

// reposition the results div accordingly to the search field 

function repositionResultsDiv() 
{ 
    // get the field position 
    var sf_pos = acSearchField.offset(); 
    var sf_top = sf_pos.top; 
    var sf_left = sf_pos.left; 

    // get the field size 
    var sf_height = acSearchField.height(); 
// var sf_width = acSearchField.width(); 
    var sf_width = 285; 

    // apply the css styles - optimized for Firefox 
    acResultsDiv.css("position","absolute"); 
    acResultsDiv.css("zIndex", 1000); 
    acResultsDiv.css("left", sf_left - 2); 
    acResultsDiv.css("top", sf_top + sf_height + 5); 
    acResultsDiv.css("width", sf_width - 2); 
}

顯然，頂部偏移值應該更大（因此它被推進一步下跌），但它似乎並沒有計算它正確。

來源

2011-12-08 catandmouse