包含输入输入时出现的动态生成列表的 div答案

【问题标题】：Div containing dynamically generated list that appears when input is entered包含输入输入时出现的动态生成列表的 div
【发布时间】：2012-05-15 20:45:31
【问题描述】：

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

我并不担心真正让自动完成工作，我只是想创建 HTML/CSS 用于显示自动完成生成的文本项列表。

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

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

不幸的是，我想不出我会怎么做这样的事情。任何人都可以让我开始或指出正确的方向吗？

【问题讨论】：

输入框有没有专门的宽度，介意加点JS吗？我假设您希望建议框出现在输入框下方的任何其他元素之上。
是的，输入框有一个设置的宽度和高度，我希望建议框出现在其他所有内容之上。我希望有一种方法可以在没有 JS 的情况下创建这个盒子，因为我正在与之合作的其他人将做 JS。我只是想用 HTML 和 CSS 创建弹出框。所以再想一想，如果这个框目前就在那里，坐在一切之上，而我正在与之合作的另一个人可能会担心 JS 将其隐藏，然后在用户开始输入时出现.

标签： html css autocomplete

【解决方案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

【讨论】：

【解决方案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

【讨论】：