向HTML5选择框添加搜索功能

Question

<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来完成这个需求？

- jarvan

---

这是一个不错的待办事项清单，但是......你的尝试源代码在哪里？这不是一个免费的编程服务，你只需提出请求，其他人就会为你完成工作......你能否更新你的问题并附上你的尝试，我相信有人会调试它，并解释为什么它不能按预期运行，也许提供一个解决方案。请避免在问题中抛出源代码，只说“它不起作用”。细节是获得良好解决方案的关键。 - NewToJS

它没有工作，因为jQuery选择器依赖于select，而select2在列表中去掉了我所拥有的html。还有另一个问题，因为jQuery验证插件在我尝试验证输入时出现了问题，但我无法正确调试它，而且由于select2插件有时会在通过ajax创建下拉菜单时导致一些显示问题，即使在使用承诺并确保在触发事件后创建了下拉菜单后，我认为我可能会问如何在没有任何插件的情况下执行此操作。代码可能有500-600行。 - jarvan

我的意思是有两件事我想做：使选择文本框分离成一个文本字段和一个下拉菜单，因为默认行为会将文本框与下拉菜单合并，我想找到最简单的方法根据用户实时输入来从列表中删除选项。你不需要看代码。（你为什么删除了你的评论？） - jarvan

要求源代码的原因是为了确保您现有的功能不会冲突或导致语法错误，从而导致其他部分失败，但我理解如果源代码太大，尝试削减它可能会很麻烦。使用浏览器控制台检查错误，也许 guest271314 的答案会符合您的要求？ - NewToJS

问题是由选择器和HTML布局不匹配以及一些插件不兼容引起的。我不知道确切的原因，但我发布了这个问题，以便找到解决我所遇到问题的最简单方法。 - jarvan

Answer 1

使用 <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>

- guest271314

---

有没有一种方法可以在不使用太多 JavaScript 或完全不使用的情况下维护 select 标签并在其中添加下拉箭头？我知道 datalist，但我需要保持 select 属性以使其正常工作。 - jarvan

@jarvan 使用<select>元素的目的是什么？是的，这是可能的。您还可以使用<ul>、<li>元素，检索元素的.textContent或dataset作为值。 - guest271314

我需要保留它以使应用程序正常工作，因为有一个jQuery选择器使用select来检索数据。 - jarvan

"因为有一个使用选择器来检索数据的 jQuery 选择器。" 你能在问题中包含 javascript 吗？ - guest271314

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - jarvan

Answer 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>

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

- Renish Gotecha

Answer 3

这个答案是在问题发布1.5年后回答的，但或许对某些人有所帮助。

我知道你说“不使用插件”，但你可以看一下jQuery Chosen插件。我对Select2也有类似的想法。现在我正在使用Chosen来创建可搜索的选择框。将其添加到我现有的应用程序中（该应用程序使用标准选择框）相当容易。Chosen似乎使用现有的选择框，将其隐藏，但正确标记所选项目，以便表单处理继续工作。可能需要一些样式来适应您的应用程序样式。

希望对某些人有所帮助。

- ds00424