如何在输入标签内搜索答案

【问题标题】：How to search inside the input label如何在输入标签内搜索
【发布时间】：2021-11-11 09:28:02
【问题描述】：

我想在选择框中搜索项目。我需要的是在输入标签中键入要搜索的关键字，然后即时选择与我的搜索匹配的项目。

应该是这样的：

这是我的代码：

var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
          '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
          '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
          '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
          '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
          '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
          '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
          '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
          '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
          '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

var select = document.getElementById("color");
for(index in arrayOfColors) {
    select.options[select.options.length] = new Option(arrayOfColors[index], index);
}

<div class="mb-3">
    <label class="form-label">Color</label>
    <select class="form-select" id="color">
     <option>     Type the search here     </option>
    </select>
</div>

有什么想法吗？谢谢！

【问题讨论】：

您可能正在寻找developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist？

标签： javascript html css

【解决方案1】：

我的评论中使用 datalist 表单元素的示例：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<datalist> HTML 元素包含一组<option> 元素，这些元素代表可在其他控件中选择的允许或推荐选项。

演示：

var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
  '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
  '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
  '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'
];

let datalist = document.querySelector("#color");
for (i = 0; i < arrayOfColors.length; i++) {
  let opt = document.createElement("option");
  opt.setAttribute("value", arrayOfColors[i]);
  datalist.appendChild(opt)
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="mb-3">
  <label class="form-label" for="iptcolor" >Color</label>
  <input class="form-select" list="color" placeholder="type your search here" id="iptcolor" />
  <datalist id="color"></datalist>
</div>

【讨论】：

如果使用datalist，需要考虑的几点：stackoverflow.com/a/21836157/4378314。无论如何，乍一看，在 Firefox 中，查看弹出列表似乎需要额外点击，或者这可能是不可避免的？
@MarsAndBack 不知道应该是什么方法，对我来说，乍一看并没有显示整个列表，但让你打字并不困扰我，直到你输入的任何内容都无法匹配列表，即没有显示然后任何浏览器中的列表都在困扰我;）

【解决方案2】：

我们可以使用jQuery UI在input中按关键字搜索选项。

代码 sn-p :

  $( function() {
    var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
          '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
          '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
          '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
          '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
          '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
          '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
          '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
          '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
          '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
    $( "#color" ).autocomplete({
      source: arrayOfColors
    });
  } );

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div class="mb-3">
    <label class="form-label">Color</label>
    <input id="color" placeholder="Type the search here">
</div>

【讨论】：