[英]Set position of div dynamically
我必须创建一个搜索结果框。 每当用户在搜索文本框中键入内容时,结果列表将填充在文本框下方的搜索结果框中。 我可以在只有一个搜索框实例的情况下执行此操作(调用方是单个文本框)。 当同一搜索框用于多个文本框时,会发生此问题。 我希望它根据呼叫者文本框调整其位置。 这是代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.searchDiv {
border: 1px solid red;
width:150px;
height:100px;
visibility: hidden;
}
</style>
<script>
showSearchBox = function (_element) {
var _div = document.getElementById('divSearch');
_div.style.visibility = 'visible';
}
hideSearchBox = function () {
var _div = document.getElementById('divSearch');
_div.style.visibility = 'hidden';
}
</script>
</head>
<body>
<table border="0" style="width: 50%">
<tbody>
<tr>
<td style="width: 50%">
<input type="text" id="txtFirstName" name="txtFirstName" onfocus="showSearchBox(this)" onblur="hideSearchBox()" />
</td>
<td style="width: 50%">
<input type="text" id="txtLastName" name="txtLastName" onfocus="showSearchBox(this)" onblur="hideSearchBox()"/>
</td>
</tr><tr>
<td colspan="2" style="width: 100%">
This is just a placeholder text.
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%">
<div id="divSearch" class="searchDiv"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
我需要在代码中进行哪些更改? 您也可以查看jsfiddle
将此添加到您的show div方法。 摆弄 。 为了使其更通用,可以使用父级的顶部和左侧值。 还要添加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);
我想您有简单的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;
这是一个小提琴
您可以使用jQuery修改.searchDiv的位置。
$(".searchDiv").css({top: 55, left: 220, position:'absolute'});
首先,您必须找出放置它的文本框的确切位置,然后将该Div绝对正确地放置在该位置的上下位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.