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

How to integrate a dropdown menu and search input box in JavaScript/jQuery?

本文关键字：下拉菜单 搜索 输入 集成 JavaScript jQuery      更新时间：2023-09-26

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

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

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

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

你需要这样的东西吗？

$(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/

相关文章：