如何根据文本框位置对齐建议列表答案

【问题标题】：How to align the suggestion list based on textbox box position如何根据文本框位置对齐建议列表
【发布时间】：2018-10-11 04:33:56
【问题描述】：

我有一个 div，里面有一个文本框。在文本框之前，有一些文本。

在文本框的 keyup 上，会弹出列表建议。我想要的是这个建议列表应该基于文本框的位置。就像如果文本是极右的，那么列表应该在该文本框下方弹出，而不是它当前弹出的方式。

这是它的代码 sn-p

function getval()
{

  textval = document.getElementById("srval").value;
  if(textval.length>0)
  {
      document.getElementById("list").style.display="block";
  }
  else
  {
        document.getElementById("list").style.display="none";     
  }
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div style="border:1px red solid;width:250px;height:20px">
 Coffeee Teat MIlk
   <input type="text" id="srval" onkeyup="getval()" style="position:absolute">
  	 <ul style="display:none;position:relative;top:5px" id="list">
  		<li>Coffee</li>
 		 <li>Tea</li>
  		<li>Milk</li>
	</ul>

</div>
</body>
</html>

【问题讨论】：

您的列表上有position: relative -- 它已经相对于输入的位置。该列表当前直接显示在文本框下方，这就是您所说的。当前显示无法按您希望的方式工作怎么办？
是的，但是当列表在左侧弹出时，而不是在下方输入问题@ObsidianAge
仍然非常不清楚您在寻找什么，但也许您只想在#list 上找到left: 100px。
你想创建自动完成文本框吗？
是的@לבנימלכה，但它应该在文本框下方，不像现在那样

标签： css position positioning

【解决方案1】：

希望对你有帮助

function getval() {

  textval = document.getElementById("srval").value;
  if (textval.length > 0) {
    document.getElementById("list").style.display = "block";
  } else {
    document.getElementById("list").style.display = "none";
  }
}

label {
  border: 1px red solid;
  width: 250px;
  height: 20px
}

input {
  position: absolute
}

#list {
  display: none;
}

#list,
#list li {
  position: relative;
  left: 50px
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <form>
    <label style="border:1px red solid;width:250px;height:20px">
 Coffeee Teat Milk</label>
    <input type="text" id="srval" onkeyup="getval()" style="">
    <ul id="list">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>


  </form>
</body>

</html>

【讨论】：

谢谢@Horacio Coronel。我也将寻求以这种方式实施。在一天结束时，我将转换此代码以做出反应，因为我需要在反应中实现它。为了理解我在 JS 中制作的逻辑