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

您可以使用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进行测试。

Answer 2

你知道JQuery AutoComplete功能..

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

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

保留相对于输入字段的建议框

2 个答案: