如何在文本框中添加下拉列表视图？

Question

我正在尝试在我的网页上实现这种类型的下拉菜单。任何帮助将受到高度赞赏。

Answer 1

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

  

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

Answer 2

您可以使用<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>