Question

在我的网站中，我有一个文本字段，必须用作自动完成框。我在页面的“标题栏”中使用此代码：

Find :<input type="text" class="input2" style="margin-bottom:0px;"  id="customersearchfield">
<div id="customersearchresult" style="display:none; position:absolute; z-index:999; background:#fff; color:black;   ">

CSS：

.input2{
    display:            inline;
    margin-top:         4px;
    padding:            3px;
    border:             0px;
    width:              200px;
}

这不能按预期工作。 resultdiv直接放在文本字段下面，但不是水平对齐。它只是与浏览器窗口的左侧对齐。

如何让resultdiv的左上角直接位于文本字段的左下角，以便它直接显示在文本字段下？

Answer 1

你已经在使用绝对定位了。我认为，您已经使用Javascript来显示和填充customersearchresult

为什么不同时定位下拉列表？

var inp = document.getElementById('customersearchfield');
var drop = document.getElementById('customersearchresult');

var rect = inp.getBoundingClientRect();

drop.style.left = rect.left + "px";
drop.style.top = (rect.bottom + 2) + "px";

示例：http://codepen.io/paulroub/pen/Cvoix

在文本字段下自动完成div

1 个答案: