Javascript 转到基于ul li的选择框中的指定文本

我想要像选择框这样的功能，当使用选择框时，如果我们键入某个关键字，并且该关键字恰好在该选择框中匹配，指针将移动到指定的文本，我想要在这里实现类似的功能，下面是我的HTML

<a href="#" id="submit"> Get Value</a>
<ul>
    <li class="init">SELECT</li>
    <li data-value="value 1">1</li>
    <li data-value="value 2">2</li>
    <li data-value="value 3">3</li>
</ul>

下面是我的CSS

ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

小提琴

查看类似或的内容。下载他们的文件并将其添加到您的站点。如果选择“选择”，则可以通过将

添加到表单元素中来初始化插件。选择“选择”

：

<select class="chosen-select">
  <option>Hello</option>
  <option>Whats Up</option>
  <option>How Are You</option>
  <option>Nice to See You</option>
  <option>Goodbye</option>
</select>

你好
怎么了
你好吗
很高兴见到你
再见

---

这里有一个小问题，问题是，我想给这个基于ul li的下拉列表提供一些什么搜索功能，您的示例是指选择框否它是一个转换为列表项的选择框。该插件以完全可定制的

ul

样式重新创建您的选择选项。它基本上正是你想要的。是的，毫无疑问，它是一个优秀的插件，但问题是selectbox只能将文本作为参数，但可以使用多个元素和事件，例如，假设我想显示一个小图像，我不能在selectbox中显示它。

<select class="chosen-select">
  <option>Hello</option>
  <option>Whats Up</option>
  <option>How Are You</option>
  <option>Nice to See You</option>
  <option>Goodbye</option>
</select>