我正在使用标签为我的搜索框创建建议列表，但我无法从数据列表中选择多个值。目前，我的HTML是：
<html>
<form action="search_tags.php" method="GET"/>
Search: <input type="text" multiple="multiple" name="search" list="tags" autocomplete="off" />
<datalist id="tags">
<option value="black">
<option value="gold">
<option value="grey">
<option value="pink">
<option value="turquoise">
<option value="red">
<option value="white">
</datalist>
</html>
它会为一个项目提供建议，但之后建议不会建议我的第二个选项自动完成。我认为“多重”标签就是我所需要的（以及网上建议的内容），但它似乎没有达到预期的效果。
有什么建议吗？
答案 0 :(得分：15)
多个目前只能使用输入类型=“电子邮件”，仅适用于Chrome和Opera
看看这个极简主义的例子：
<input type="email" list="emails" multiple>
<datalist id="emails">
<option value="first@example.com">
<option value="second@example.com">
<option value="third@example.com">
<option value="last@example.com">
</datalist>
<input type="text" list="texts" multiple>
<datalist id="texts">
<option value="black">
<option value="gold">
<option value="grey">
<option value="pink">
<option value="turquoise">
<option value="red">
<option value="white">
</datalist>
（http://jsfiddle.net/iiic/t66boyea/1/）
第一个输入将起作用，第二个输入不是。您只按逗号，列表将与点击输入时相同。
答案 1 :(得分：2)
自定义数据列表以接受多个值：
<强> https://jsfiddle.net/bhbwg0rg/1/
每次输入后按，（逗号），然后空格键
<label for="authors">Type authors from favorite to least favorite</label>
<input type="text" list="names-list" id="authors" value="" size="50" name="authors" placeholder="Type author names">
<small>You can type how many you want.</small>
<datalist id="names-list">
<option value="Albert Camus">
<option value="Alexandre Dumas">
<option value="C. S. Lewis">
<option value="Charles Dickens">
<option value="Dante Alighieri">
</datalist>
答案 2 :(得分：0)
According to this'multiple'属性仅对电子邮件和文件输入类型有效。
答案 3 :(得分：0)
我遇到了同样的问题，建议的解决方案似乎并没有解决。我写了这个Pure JS（IE11安全）插件UnComplete来创建一个有助于管理多个值的交互。
答案 4 :(得分：0)
我想要一个简单的东西，但是据我了解，“ multiple”属性仅适用于电子邮件和文件，因为HTML5开发人员不想打开蠕虫病毒，但是devs are considering a change 。搜索完所有内容后，我唯一能使它起作用的方法是也获得列表中那些花哨的，有用的“ #tagHere X”项目，就像在许多网站上一样。全部还是什么都没有，它解决了我同样的问题。
很遗憾，我找不到有关如何使用 Flexdatalist 的完整说明。因此，我将提供一个超完整的演练和一个有效的示例，如果过多的话请原谅...
jquery.flexdatalist.min.js jquery.flexdatalist.css（您可以改为 .min .js ，但您可能想调整CSS）
我用过：
[DOMAIN]/js/jquery.flexdatalist.min.js
[DOMAIN]/css/jquery.flexdatalist.css
要么：
@import "jquery.flexdatalist.css";文件中的style.css已在[DOMAIN]/css/ 或
<link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css"> 页面的<head>标签与datalist <input>的{{1}}标记中（以及其他属性）
datalist ... <input ... class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple" > datalist <script src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></script>
<script src=\"js/jquery.flexdatalist.min.js\"></script>
<script>
$('.flexdatalist-json').flexdatalist({
searchContain: false,
valueProperty: 'iso2',
minLength: 1,
focusFirstResult: true,
selectionRequired: true,
});
</script>
：
[DOMAIN]/index.html在此处有两个文件：
<!DOCTYPE html>
<html>
<head>
<title>Flexdatalist Minimalist</title>
<link href="jquery.flexdatalist.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="text" placeholder="Choose a fruit"
class="flexdatalist form-control"
data-min-length="1"
data-searchContain="true"
multiple="multiple"
list="fruit" name="my-fruit">
<datalist id="fruit">
<option value="Apples">Apples</option>
<option value="Bananas">Bananas</option>
<option value="Cherries">Cherries</option>
<option value="Kiwi">Kiwi</option>
<option value="Pineapple">Pineapple</option>
<option value="Zucchini">Zucchini</option>
</datalist>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.flexdatalist.min.js"></script>
<script>
$('.flexdatalist-json').flexdatalist({
searchContain: false,
valueProperty: 'iso2',
minLength: 1,
focusFirstResult: true,
selectionRequired: true,
});
</script>
</body>
</html>
一种备有出色文档的替代方法是：Awesomeplete