如果自动填充位于页面底部，则自动填充选项会浮动在文本区域上方

Question

我们正在使用此自动填充插件：jQuery AutoComplete

但是，当输入字段位于页面底部时，会出现问题。自动完成列表（一旦您开始键入时出现的列表）会改变其位置，以便不是在文本框中放下，而是将其浮动在文本框上方。如果列表中有很多项目，那没关系。但是，如果选项很少且高度不够，则输入框与自动完成框之间存在巨大差距。

为了让图片更加清晰：

有人知道如何修改代码以便不会发生这种情况吗？或者，无论如何，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);
}

显然，顶部偏移值应该更大（以便进一步向下推）但它似乎无法正确计算。

Answer 1

您可以控制“位置”属性。你可以用它做简单的事情，或简单的事情。 http://docs.jquery.com/UI/Autocomplete#option-position

请注意，jQuery默认使用的是尝试查找不会发生冲突的位置。如果你改变了，请确保你不要改变它。

Answer 2

我能够找出问题所在。显然，在该特定页面上，页面加载后会生成一些内容，因此偏移值不会考虑该附加内容的高度。

我暂时做的解决方案是为该页面使用不同的ID，并在jQuery上添加一个条件，以便在检测到该ID时添加特定的高度。我想我需要使用一些实时方法，或者可能在加载autosuggest脚本之前首先加载该内容，但是现在这个临时修复将会这样做。