0

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

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

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

在此处输入图像描述

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

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

4

2 回答 2

0

基本思想是有一个相对于页面定位但不移动它的父元素。由于此元素已定位（不是静态的），因此您可以将建议框相对于父元素绝对定位在文本框下方。由于它是绝对定位的，它不会影响文档流，也就是它出现在文本框下方的其他元素之上。像这样的东西应该工作：

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

于 2012-05-14T00:20:32.490 回答
0

这是一个简单的方法

  • 将元素包装在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>

演示

于 2012-05-14T01:04:19.943 回答