Html 使用数据列表进行多项选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14148538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
multiple selections with datalist
提问by nathan lachenmyer
I'm using the tag to create a list of suggestions for my search box, but I cannot select multiple values from the datalist. Currently, my HTML is:
我正在使用该标签为我的搜索框创建建议列表，但我无法从数据列表中选择多个值。目前，我的 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>
It will offer suggestions for one item, but after that the suggestions won't suggest an autocomplete for my second option. I thought that the 'multiple' tag was all I needed (and what is suggested online) but it doesn't seem to have the desired effect.
它将为一个项目提供建议，但之后这些建议不会为我的第二个选项建议自动完成。我认为“多个”标签是我所需要的（以及在线建议的内容），但它似乎没有达到预期的效果。
Any suggestions?
有什么建议？
回答by iiic
Multiple currently working only with input type="email" and only in Chrome and Opera
多个当前仅使用 input type="email" 并且仅在 Chrome 和 Opera 中工作
look at this minimalist example:
看看这个极简主义的例子：
<input type="email" list="emails" multiple>
<datalist id="emails">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
</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/)
( http://jsfiddle.net/iiic/t66boyea/1/)
First input will be working, second NOT.You only press comma, and list will appear as same as on click into input.
第一个输入将工作，第二个不是。您只需按逗号，列表将与单击输入时显示的相同。
回答by Neil
Customized datalist to accept multiple values:
自定义数据列表以接受多个值：
https://jsfiddle.net/bhbwg0rg/1/
https://jsfiddle.net/bhbwg0rg/1/
After each entry press ,(Comma)and then Spacebar
每次输入后按,（逗号）然后空格键
<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>
回答by Jesse Steele
Super-simple jQuery tool: Flexdatalist
超简单的jQuery工具：Flexdatalist
I wanted something simpler, but the "multiple" attribute, from what I understand, only works with email and files because the HTML5 devs don't want to open a can of worms, but devs are considering a change. After searching all over, the only way I could get this to work was to alsoget those fancy, useful "#tagHere X" items in the list like on so many websites. It was all or nothing and it solved my same problem.
我想要更简单的东西，但据我所知，“多重”属性只适用于电子邮件和文件，因为 HTML5 开发人员不想打开一罐蠕虫，但开发人员正在考虑进行更改。遍搜索后，只有这样我能得到这个工作是也让那些花哨的，有用的“#tagHere X”列表中的项目像这么多的网站。要么全有要么全无，它解决了我同样的问题。
Unfortunately, I couldn't find complete instructions on how to use Flexdatalist. So, I'm including a super-complete walk-through with a working example, pardon if it it too much...
不幸的是，我找不到有关如何使用Flexdatalist 的完整说明。所以，我包含了一个超级完整的演练和一个工作示例，如果它太多了，请原谅......
1. Get only twofiles from Flexdataliston GitHub
1. 只从GitHub 上的Flexdatalist获取两个文件
jquery.flexdatalist.min.jsjquery.flexdatalist.css(You could do .min.cssinstead, but you probably want to tweak the CSS)
jquery.flexdatalist.min.jsjquery.flexdatalist.css（您可以改为使用.min.css，但您可能想要调整 CSS）
2. Put these two files in the right place:
2. 将这两个文件放在正确的位置：
I used:
我用了：
[DOMAIN]/js/jquery.flexdatalist.min.js
[DOMAIN]/css/jquery.flexdatalist.css
3. Include the CSS file
3.包含CSS文件
either:
任何一个：
@import "jquery.flexdatalist.css";in yourstyle.cssfile already in[DOMAIN]/css/
@import "jquery.flexdatalist.css";在你的style.css文件中已经[DOMAIN]/css/
or
或者
<link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css">between your<head>tags of the page with thedatalist
<link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css">在<head>页面的标签之间datalist
4. Include these attributes in your <input>element that contains your datalist
4. 在<input>包含您的元素的元素中包含这些属性datalist
(along with your other attributes)
（连同你的其他属性）
<input...class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple"...>
<input...class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple"...>
5. Include threeJavaScript statements after your datalist
5.在你之后加入三个JavaScript 语句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>
Working example:
工作示例：
[DOMAIN]/index.html:
[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>
With the twofiles here:
使用这里的两个文件：
[DOMAIN]/js/jquery.flexdatalist.min.js
[DOMAIN]/css/jquery.flexdatalist.css
An alternative, with great documentation, is: Awesomeplete
另一种具有很好文档的替代方法是：Awesomeplete
回答by Ryan
I had the same problem and the solutions suggested just did not seem to cut it. I wrote this Pure JS (IE11 safe) plugin UnCompleteto create an interaction that helped manage multiple values.
我遇到了同样的问题，建议的解决方案似乎并没有解决。我编写了这个 Pure JS（IE11 安全）插件UnComplete来创建一个有助于管理多个值的交互。
回答by Blue
According to this'multiple' attribute is only valid with emailand fileinput types.
根据这个'multiple' 属性只对电子邮件和文件输入类型有效。
