使用Javascript和CSS进行弹出窗口定位

Question

我的网络应用程序有一个搜索字段，用户可以输入一些标签进行搜索。该窗口应弹出搜索字段下方，如下图所示：

我需要了解的主要细节是如何实现窗口定位。它是一些具有绝对定位和z-index的隐藏div吗？ 我对最常见的Vanilla Javascript，HTML5和CSS方法感兴趣。

Answer 1

建议框是自动填充组件。你可以很好地使用James Smith的jQuery令牌输入（http://loopj.com/jquery-tokeninput/）

就位置好奇心而言：

这只是与输入元素底部对齐的问题。这可以使用纯CSS来完成。

input {
  width: 50%;
}

.spanClass {
  display: none;
}

.focusAlign input[type="text"]:focus~.spanClass {
  display: block;
  width: 50%;
  box-sizing: border-box;
  position: absolute;
  top: 29px;
  left: 8px;
  background: #333;
  padding: 3px;
  font: .75em sans-serif;
  color: #eee;
}

<div class="focusAlign">
  <input id="same" type="text" value="" />
  <span class="spanClass">
    <p>Oh, this is a suggestion.</p>
    <p>Yeah, well, so am I.</p>
    <p>Me, too!</p>
    <p>Whatever, I'm here.</p>
  </span>
</div>