use*_*256 1 html javascript css
我必须创建一个搜索结果框。每当用户在搜索文本框中键入内容时，结果列表将填充在文本框下方的搜索结果框中。我可以在只有一个搜索框实例的情况下执行此操作（调用方是单个文本框）。当同一搜索框用于多个文本框时，会发生此问题。我希望它根据呼叫者文本框调整其位置。这是代码：
<!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);