Question

我必须创建一个搜索结果框。每当用户在搜索文本框中键入内容时，结果列表将填充在文本框下方的搜索结果框中。我能够在只有一个搜索框实例（调用者是单个文本框）的情况下执行此操作。当同一个搜索框用于多个文本框时，会出现此问题。我希望它根据来电者文本框调整其位置。这是代码：

UPDATE

我需要在代码中进行哪些更改？您还可以查看jsfiddle

Answer 1

将此添加到show div方法中。 fiddle。为了使它更通用，您可以使用父级的顶部和左侧值。同时将position:relative添加到您的div

 var parentPositionLeft = _element.getBoundingClientRect().left;
 var parentPositionTop = _element.getBoundingClientRect().top;


            _div.style.left = parentPositionLeft+'px';
            _div.style.top = parentPositionTop+'px';
            console.log(_div.style.left);

Answer 2

我猜你有简单的javascript，所以在这种情况下你需要改变你的函数showSearchBox这样的函数：

showSearchBox = function (_element) {
    var _div = document.getElementById('divSearch');

    var input = _element.getBoundingClientRect();

    _div.style.left = input.left + 'px';
    _div.style.top = input.top + 'px';
    _div.style.visibility = 'visible';
}

并将此规则添加到css类.searchDiv：

position: relative;

这是fiddle

Answer 3

您可以使用jQuery修改.searchDiv的位置。

$(".searchDiv").css({top: 55, left: 220, position:'absolute'});

试试这个：https://jsfiddle.net/ybdesire/yy751fn6/

动态设置div的位置

3 个答案: