我希望找到一个更简单的方式,但据我所知,“multiple”属性只适用于电子邮件和文件,因为HTML5开发人员不想打开“无底洞”,但是开发人员正在考虑修改。在搜索了所有资源之后,我唯一可以让它起作用的方法是也获得那些像许多网站上那样的漂亮、有用的列表项“#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">
在包含 datalist
的页面的<head>
标签之间。
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>
工作示例:
[域名]/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