我想要一些更简单的东西,但据我了解,“multiple”属性仅适用于电子邮件和文件,因为 HTML5 开发人员不想打开一罐蠕虫,而是 devs are considering a change。在搜索完所有内容后,我可以让这个工作的唯一方法是也在列表中获得那些花哨、有用的“#tagHere X”项目,就像在许多网站上一样。要么全有,要么全无,它解决了我同样的问题。
很遗憾,我找不到有关如何使用 Flexdatalist 的完整说明。所以,我包括一个超级完整的演练和一个工作示例,如果它太多了,请原谅......
jquery.flexdatalist.min.js
-
jquery.flexdatalist.css(您可以改用 .min.css,但您可能需要调整 CSS)
2。将这两个文件放在正确的位置:
我用过:
[DOMAIN]/js/jquery.flexdatalist.min.js
[DOMAIN]/css/jquery.flexdatalist.css
3。包含 CSS 文件
要么:
-
@import "jquery.flexdatalist.css"; 在您的 style.css 文件中已经在 [DOMAIN]/css/
或
-
<link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css"> 在您的页面的<head> 标记与datalist之间
4。在包含 datalist 的 <input> 元素中包含这些属性
(连同你的其他属性)
-
<input... class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple" ...>
5。在 datalist 之后包含 三个 JavaScript 语句
<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