如果自动完成是在页面的底部，自动完成选项浮动文本区域

上面，我们正在使用这种自动完成插件：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