Javascript 带有下拉提示的输入字段

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

我想知道是否有插件或代码示例做类似的事情？ 谢谢大家!

这里有一个

---

对于

.hint

标题，您可以使用

哦，这正是我需要的。非常感谢你！不客气，我很高兴能帮上忙；）我在中添加了jQuery UI工具提示示例。我正在阅读您的代码。在下面的代码中，“+”符号是什么意思：输入：聚焦+。提示菜单{display:block；}

+

用于在聚焦输入时选择

。提示菜单

。更多关于。

<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;
}