nat*_*yer 24 html5 html-datalist
我正在使用标签为我的搜索框创建建议列表,但我无法从数据列表中选择多个值.目前,我的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>
它会为一个项目提供建议,但之后建议不会建议我的第二个选项自动完成.我认为"多重"标签是我所需要的(以及网上建议的内容),但它似乎没有达到预期的效果.
有什么建议？
iii*_*iic 17
多个目前仅使用输入类型="电子邮件",仅适用于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/)
第一个输入将起作用,第二个输入.您只需按逗号,列表将与点击输入时相同.
我想要更简单的东西，但据我了解，“多个”属性仅适用于电子邮件和文件，因为 HTML5 开发人员不想打开一堆蠕虫，但开发人员正在考虑进行更改。经过彻底搜索后，我可以让它发挥作用的唯一方法就是在列表中获取那些奇特、有用的“#tagHere X”项目，就像在许多网站上一样。要么全有要么全无，它解决了我同样的问题。
不幸的是，我找不到有关如何使用Flexdatalist 的完整说明。所以，我提供了一个超级完整的演练和一个工作示例，如果太多请原谅......
jquery.flexdatalist.min.jsjquery.flexdatalist.css（你可以改为.min .css，但你可能想调整 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>包含您的元素的元素中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>
这里有两个文件：
[DOMAIN]/js/jquery.flexdatalist.min.js
[DOMAIN]/css/jquery.flexdatalist.css
具有丰富文档的替代方案是：Awesomeplete