如何在文本框上添加带有搜索的下拉列表视图？ [关闭]答案

【问题标题】：How to add dropdown listview with search on textbox? [closed]如何在文本框上添加带有搜索的下拉列表视图？ [关闭]
【发布时间】：2017-02-22 01:17:30
【问题描述】：

我正在尝试在我的页面上实现这种类型的下拉菜单。任何帮助将不胜感激。

【问题讨论】：

检查这个。 templatemonster.com/blog/… 并在发布问题之前尝试谷歌搜索您想要做什么。很有可能，有人已经问过这个问题并且已经得到了回答。
你已经尝试过什么了吗？
是的，我正在尝试引导程序来执行此操作，但它无法正常工作
我花了两天时间在网上搜索和搜索以找到解决方案，但没有成功，这就是我在这里发布一个新问题的原因，希望能得到社区的帮助，因为我仍然是一名学习者，并且网页设计新手。

标签： javascript jquery css html drop-down-menu

【解决方案1】：

您可以使用 <datalist> 元素来利用 HTML5 的原生下拉菜单实现。

工作示例：

<input list="adventure" name="myAdventure" placeholder="Start your search by typing 'Location' or 'Activity'" size="45">

<datalist id="adventure">
  <option value="Location - Azad Kashmir">
  <option value="Location - Balochistan">
  <option value="Location - Chitral / Kalash">
  <option value="Location - Fairy Meadows">
  <option value="Location - Hunza / Gilgit">
  <option value="Location - Islamabad">

  <option value="Activity - Beach">
  <option value="Activity - Cliff Diving">
  <option value="Activity - Cultural Tour">
  <option value="Activity - Desert Safari">
  <option value="Activity - Moutaineering">
  <option value="Activity - Paragliding">
</datalist>

【讨论】：

【解决方案2】：

您可以使用 jQuery 插件，例如 jQuery UI's Autocomplete component。

使用户能够在键入时快速查找并从预先填充的值列表中进行选择，从而利用搜索和过滤。

【讨论】：