Question

我有div，因为有一个textbox.before文本框，有一些文字。

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

这是它的代码片段

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

我希望这会有所帮助

＆＃13;

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

＆＃13;

label {
  border: 1px red solid;
  width: 250px;
  height: 20px
}

input {
  position: absolute
}

#list {
  display: none;
}

#list,
#list li {
  position: relative;
  left: 50px
}

＆＃13;

<!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>

＆＃13;

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

1 个答案: