html - 包含输入输入时显示的动态生成列表的 Div

Question

本质上，我正在尝试为自动完成创建 HTML/CSS。我希望它看起来/表现大致像这里的那个:http://www.skyscanner.com/ (输入“发件人”或“收件人”字段)

我并不担心自动完成的实际工作，我只想创建用于显示自动完成生成的文本项列表的 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 显示的圆 Angular 边框。如果该属性在给定浏览器中不可用，则应仅使用常规边框。

演示(包括下面的文字):http://www.dstrout.net/pub/suggest.htm