javascript - 保持建议框相对于输入字段

Question

我有这个输入框和自动建议div，当输入内容时会显示该输入框。输入框没有固定位置并且可以位于页面上的不同位置。

我怎样才能使建议框div始终出现相对于输入的位置。即建议 div 的左上角与输入的右下角是同一点？

$('#textBox').on('keypress',function(){
    $('#suggestionBox').show();
  });

<input type = "text" id = "textBox" />  
<div id = "suggestionBox" style = "display:none;">
<ul>
 <li>suggestion</li>
</ul>
</div>

Answer 1

您可以使用 DOM0 的 offset[Top|Left|Height] 属性:

$('#textBox').on('keypress',function(){
    $('#suggestionBox').css({
        position: "absolute",
        top: (this.offsetTop + this.offsetHeight) + "px",
        left: this.offsetLeft + "px"
    });
    $('#suggestionBox').show();
});

您可以对此进行测试 jsFiddle .