Div包含输入输入时出现的动态生成的列表

Question

基本上我正在尝试为自动完成创建HTML / CSS。我希望它的外观/行为与此处大致相似：http://www.skyscanner.com/（输入From或To字段）

我并不担心实际进行自动完成工作，我只想创建用于显示自动完成生成的文本项列表的HTML / CSS。

这是我希望制作的基本布局：

输入框1和输入框2是我目前拥有的。当用户点击其中一个输入框时，我希望显示相应的自动完成框（此时将显示虚假数据）。

不幸的是我想不出我会怎么做这样的事情。谁能让我开始或指出我正确的方向？

Answer 1

基本思想是让父元素相对于页面定位，但不移动它。由于此元素位于（非静态），因此您可以在文本框下将建议框相对于父元素绝对放置。由于它绝对定位，因此不会影响文档流，例如，它出现在文本框下方的其他元素上。这样的事情应该有效：

<强> HTML：

<span class="tbSuggestParent">
<input type="text" class="tbSuggest">
<span class="suggestions"><!-- Suggestions go here --></span>
</span>

<强> CSS：

.tbSuggestParent {
    position: relative;
    display: inline-block;
}

.tbSuggest {
    width: 200px;
    height: 30px;
    font-family: Arial;
    font-size: 14pt;
    border: 2px solid black;
    border-radius: 2px;
}

.suggestions {
    position: absolute;
    width: 170px;
    height: 300px;
    top: 36px;
    left: 15px;
    border: 1px solid black;
    border-radius: 2px;
    display: inline-block;
    background-color: white;
}

这包括使用border-radius时图像似乎显示的圆形边框。如果该属性在给定的浏览器中不可用，则应该只使用常规边框。

演示（包括下方的文字）：http://www.dstrout.net/pub/suggest.htm

Answer 2

这是一个简单的方法

• 将您的元素包裹在div中。 为什么？它避免使用大量不必要的样式

将div设置为relative，然后自动完成框将自动与框和容器的输入对齐。

这是我建议的标记。

<div class="field">
     <input type="text" />
     <ul class ="autocomplete">
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
          <li>Option 5</li>
     </ul>
</div>

Demo