动态设置div的位置
[英]Set position of div dynamically
问题描述
I have to create a search result box. 
我必须创建一个搜索结果框。 Whenever a user type something in the search text box the list of result will be populated in the search result box just underneath the textbox. 每当用户在搜索文本框中键入内容时，结果列表将填充在文本框下方的搜索结果框中。 I am able to do this where there is only one instance of the search box(the caller is a single textbox). 我可以在只有一个搜索框实例的情况下执行此操作（调用方是单个文本框）。 The problem occurs when the same searchbox is used for multiple text boxes. 当同一搜索框用于多个文本框时，会发生此问题。 I want it to adjust its position according to the caller textbox. 我希望它根据呼叫者文本框调整其位置。 Here is the code: 这是代码：
<!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>
What changes do I need to make in my code? 我需要在代码中进行哪些更改？ You can also check out the jsfiddle 您也可以查看jsfiddle
4 个解决方案
解决方案1
5 已采纳 2015-09-11 06:20:00
add this to your show div method. 将此添加到您的show div方法。 fiddle . 摆弄 。 to make it more general you can use the top and left values from parent. 为了使其更通用，可以使用父级的顶部和左侧值。 Also add position:relative to your 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);
解决方案2
1 2015-09-11 06:13:21
I guess you have plain javascript, so in this case you gonna need to change your function showSearchBox function like this: 我想您有简单的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';
}
and add this rule to you css class .searchDiv : 并将此规则添加到您的CSS类.searchDiv ：
position: relative;
解决方案3
0 2015-09-11 06:15:57
You can use jQuery to modify the position of .searchDiv. 您可以使用jQuery修改.searchDiv的位置。
$(".searchDiv").css({top: 55, left: 220, position:'absolute'});
Try this: https://jsfiddle.net/ybdesire/yy751fn6/ 试试这个： https : //jsfiddle.net/ybdesire/yy751fn6/
解决方案4
0 2015-09-11 06:22:41
首先，您必须找出放置它的文本框的确切位置，然后将该Div绝对正确地放置在该位置的上下位置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.