向 HTML5 选择添加搜索功能答案

【问题标题】：Adding a search feature to HTML5 select向 HTML5 选择添加搜索功能
【发布时间】：2016-10-31 11:46:06
【问题描述】：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

我需要添加一个搜索栏，以便我从列表中过滤掉不需要的选项。我需要使用 select 并且我需要在没有插件的情况下执行此操作，最简单的方法是什么？我尝试使用 select2 插件，但它搞砸了我的整个应用程序，因为它依赖于以前的开发人员编写的一些逻辑。数据填充已经处理好了，所以我不需要做任何事情来填充它。

我还需要指出，我需要能够在文本框中输入，这是 html5 select 不允许我做的事情，并且能够有一个下拉箭头让我看到完整的列表。我们可以通过一些技巧单独使用 html5 来做到这一点，还是我需要大量的 javascript 来做到这一点？

【问题讨论】：

这是一个不错的待办事项列表，但是....您尝试的源代码在哪里？这不是一项免费的编程服务，您可以在其中放弃请求，而其他人会为您完成工作……您能否用您的尝试更新您的问题，我相信有人会调试它并解释它的原因t 按预期运行，并可能提供解决方案。请避免将源代码扔到“它不起作用”的问题中细节是获得好的解决方案的关键。
它不起作用，因为 jQuery 选择器依赖于 select 并且 select2 以某种方式摆脱了我列表中的 html。还有另一个问题，因为当我尝试验证我的输入时，jQuery validate 插件不知何故搞砸了，但我无法真正正确调试它，因为即使在我通过 ajax 调用创建下拉列表时，select2 插件有时也会导致一些显示问题使用了一个承诺并确保在触发事件后创建下拉菜单，我想我可能会问我如何在没有任何插件的情况下做到这一点。代码大概有 500-600 行。
我的意思是我想做两件事：将选择文本框分成一个文本字段，用户可以在其中输入文本和一个下拉菜单，因为默认行为只是合并带有下拉菜单的文本框，我想根据用户实时输入的内容找到从列表中删除选项的最简单方法。您无需查看代码。（你为什么删除你的评论？）
索取源代码的原因是为了确保您现有的函数没有冲突或导致语法错误，这将导致其余的失败，但我理解如果源代码太大，它可能是尝试减少它很痛苦。使用您的浏览器控制台检查错误，也许 guest271314 答案会符合您的要求？
嗯，问题是由选择器和 html 布局不匹配以及一些插件不兼容引起的。我不知道确切的原因，但我发布这个问题是为了找到解决我遇到的问题的最简单方法。

标签： javascript jquery html drop-down-menu

【解决方案1】：

这个答案是在 Q 之后大约 1.5 年，但它可能对某人有所帮助。

我知道你说“没有插件”，但你可以看看 jQuery Chosen 插件。出于类似的原因，我对 Select2 并不疯狂。我现在正在使用 Chosen 进行可搜索的 Select。添加到使用标准选择的现有应用程序中相当容易。 Chosen 似乎使用了您现有的 Select，将其隐藏，但正确标记了所选项目，以便表单处理继续工作。可能需要一些样式以适应您的应用程序样式。

某人。

【讨论】：

【解决方案2】：

电池你用<datalist>代替<select>

<input placeholder="Type Car Name" list="cars">
 <datalist id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
 </datalist>

注意：Internet Explorer 9 及更早版本或 Safari 不支持 datalist 标签。

【讨论】：

【解决方案3】：

使用<datalist>元素

<label for="cars">Search cars: <input list="cars" name="cars" type="text">
</label>
<datalist id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</datalist>

【讨论】：

有没有办法维护选择标签并以某种方式在其中添加一个下拉箭头而无需太多 javascript 或根本没有？我知道 datalist，但我需要保留 select 属性以使其正常工作。
@jarvan 使用<select> 元素的目的是什么？对的，这是可能的。您还可以使用<ul>、<li> 元素，检索元素的.textContent 或dataset 作为值
我需要保留它以使应用程序正常工作，因为有一个使用 select 检索数据的 jQuery 选择器。
“因为有一个使用 select 来检索数据的 jQuery 选择器” 你能在问题中包含javascript 吗？
抱歉，我添加了 javascript 标签，因为我无法用其中的 javascript 这个词来表达这个问题。