带下拉提示的输入字段

Question

您好我想创建一个带有提示菜单的html输入字段。效果应该如下图所示。单击输入字段后，将显示下拉菜单。

我想知道是否有任何插件或代码示例做类似的事情？ 谢谢你！

Answer 1

这是 FIDDLE

<input type="text">

<div class="hints-menu">
  <span class="hints-title">Title 1</span>
  <span class="hint" title="Some title">Item 1</span>
  <span class="hint" title="Some title">Item 2</span>
  <span class="hint" title="Some title">Item 3</span>
  <span class="hints-title">Title 2</span>
  <span class="hint" title="Some title">Item 4</span>
  <span class="hint" title="Some title">Item 5</span>
  <span class="hints-title">Title 3</span>
  <span class="hint" title="Some title">Item 6</span>
  <span class="hint" title="Some title">Item 7</span>
  <span class="hint" title="Some title">Item 8</span>
  <span class="hint" title="Some title">Item 9</span>
</div>

---

input {
  width: 252px;
  height: 28px;
  padding: 0 4px;
  line-height: 20px;
  border: 1px solid #ddd;

  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
input:focus {
  outline: none;
}
input:focus + .hints-menu {
  display: block;
}
.hints-menu {
  background: #fff;
  position: relative;
  display: none;
  width: 240px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;

  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.hints-menu:before,
.hints-menu:after {
  bottom: 100%;
  left: 83%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.hints-menu:before {
  border-color: transparent;
  border-bottom-color: #ddd;
  border-width: 9px;
  margin-left: -9px;
}
.hints-menu:after {
  border-color: transparent;
  border-bottom-color: #fff;
  border-width: 8px;
  margin-left: -8px;
}
.hints-title,
.hint {
  display: block;
  width: 100%;
  height: 22px;
  line-height: 22px;
  color: #555;
}
.hints-title {
  margin: 5px 0;
  text-align: center;
  font-size: 15px;
}
.hint {
  cursor: pointer;
  font-size: 14px;
}
.hint:hover {
  color: #6fa024;
}

对于.hint标题，您可以使用jQuery UI Tooltip