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

Question

我有这个input box，an auto suggest div当输入某些内容时会显示。input box没有固定位置，可以在页面上的不同位置。

我怎样才能使建议框div始终出现relative to the position在输入中。即建议 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

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

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

您可以在此jsFiddle上进行测试。

Answer 2

你知道 JQuery自动完成功能吗？

它做了你需要的同样的事情。试试看。。很简单。。

它使用户能够在键入时快速查找并从每个填充的值列表中进行选择，从而利用搜索和过滤。