最近在做标签系统的时候,为了便于用户对标签的操作,如输入或是删除,用到了bootstrap-tagsinput。主要是用到了其中的Typeahead部分。
效果如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script src="http://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet">
<style type="text/css">
.icon-github {
width: 16px;
height: 16px;
}
.bootstrap-tagsinput {
width: 100%;
}
.accordion {
margin-bottom:-3px;
}
.accordion-group {
border: none;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.twitter-typeahead .tt-hint
{
display: none;
}
.tt-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
cursor: pointer;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: nowrap;
}
.tt-suggestion:hover,
.tt-suggestion:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #428bca;
}
</style>
</head>
<body>
<input type="text" />
<script>
var cities = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'cities.json' //标签所在文件,当然也可以从数据库中读取数据,然后生成json返回
});
cities.initialize();
var elt = $('input');
elt.tagsinput({
itemValue: 'id',
itemText: 'name',
typeaheadjs: {
name: 'cities',
displayKey: 'name',
source: cities.ttAdapter()
}
});
elt.tagsinput('add', { "id": 0 , "name": "Washington"});
</script>
</body>
</html>
参考:https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples
Bootstrap Tags Input :https://github.com/bootstrap-tagsinput/bootstrap-tagsinput
关于标签的插件还有很多,如
Amaze UI Tags Input :https://github.com/amazeui/tagsinput