如何在 JavaScript/jQuery 中集成下拉菜单和搜索输入框？答案

【问题标题】：How to integrate a dropdown menu and search input box in JavaScript/jQuery?如何在 JavaScript/jQuery 中集成下拉菜单和搜索输入框？
【发布时间】：2016-02-24 17:13:39
【问题描述】：

我正在尝试构建下拉菜单的本机搜索。这个demo 有一个单独的输入框，通过下拉菜单搜索（下面的代码也是如此）。

<form>
search <input type="text" id="realtxt" onkeyup="javascript:searchSel();"/>
  <select id="realitems">
    <option value="">select...</option>
    <option value="1">Power hungry</option>
    <option value="2">Super man</option>
    <option value="3">Hyperactive</option>
    <option value="4">Bored</option>
    <option value="5">Human</option>
  </select>
</form>

function searchSel() {
  var input = document.getElementById('realtxt').value.toLowerCase(); 
  var output = document.getElementById('realitems').options;

  for(var i=0; i<output.length; i++)
      if (output[i].text.toLowerCase().indexOf(input) != -1 ){
          output[i].selected = true;
          break;
      }
  if (input == ''){
    output[0].selected = true;
  }
}

但是，我希望能够直接在下拉菜单中进行搜索，就像 plugin 所做的那样。

有没有办法将两者结合起来？例如，我能否以某种方式将输入和输出组合起来，以便搜索位于下拉列表的顶部？

【问题讨论】：

不清楚你在问什么。您是在问是否可以将文本框直接放在选择下拉列表中？
你需要在这里玩css和jquery..你的实际html元素隐藏了，并且必须用ul和li's创建一个新元素..
@Kyle 这可能吗？如果是这样，那可能会有所帮助。我希望能够在下拉列表顶部输入并搜索项目。
@AndréDion 这绝对有效！但这不是我想要的最终结果。我希望能够直接在下拉菜单中搜索。
不，不是。看看 select2 是如何用文本框和列表做的，你需要构建 dom 来替换标准的 select。

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

【解决方案1】：

你需要这样的东西吗？

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

来源：https://jqueryui.com/autocomplete/

【讨论】：

我不想使用插件。我正在尝试本地构建它。