Javascript 向HTML5 select添加搜索功能 沃尔沃汽车 萨博 梅赛德斯 奥迪

我需要添加一个搜索栏，允许我从列表中过滤不需要的选项。我需要使用select，我需要在没有插件的情况下完成这项工作，最简单的方法是什么？我尝试使用select2插件，但它破坏了我的整个应用程序，因为它依赖于以前的开发人员编写的一些逻辑。数据填充已经完成，所以我不需要做任何事情来填充它

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

使用元素

搜索汽车：
沃尔沃汽车
萨博
梅赛德斯
奥迪

您使用

代替

沃尔沃汽车
萨博
梅赛德斯
奥迪

---

注意：Internet Explorer 9及早期版本或Safari中不支持datalist标记。

此答案大约在Q之后1.5年，但可能对某人有所帮助

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

---

有人。

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

元素的目的是什么？是的，这是可能的。您还可以使用

，
元素，检索元素的
.textContent
或
数据集
来获取值我需要保留它以使应用程序工作，因为有一个jQuery选择器使用select来检索数据。“因为有一个jQuery选择器使用select来检索数据”你能在问题中加入
javascript
吗？对不起，我添加了javascript标签，因为我不能用javascript这个词来正确地表达问题。
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</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>