项目要实现一个功能,就是像添加关键字一样添加人员,同时要做到预输入查询。于是就使用了bootstrap-tagsinput
。
官方的example:Bootstrap Tags Input
然后我参考的是其中的typeahead案例,
typeahead的官方example:typeahead
下面是我自己的代码
首先是css和js的引用
<link href='${ctxStatic}/css/bootstrap-tagsinput.css' rel='stylesheet' />
<link href='${ctxStatic}/css/keywords.css' rel='stylesheet' />
<script type="text/javascript" src="${ctxStatic}/typeahead.js/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/typeahead.js/typeahead.jquery.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/typeahead.js/bloodhound.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/mustache.min.js"></script>
然后是js
<script type="text/javascript">
$(function(){
var a = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), //以name字段作为匹配的关键字
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
cache:false,
url:'${ctx}/calculate/salaryUser/getNameJson.jhtml?compCode='+$("#compCodeId").val() //ajax获取list数据,注意是get方法
}
});
$(".empKey").tagsinput({
allowDuplicates: false, //不可以重复
itemValue : 'empId', //提交数据时以empId作为值
itemText : 'name', //卡片显示的是name
typeaheadjs: {
name: 'users',
displayKey: 'name', //预输入选项里面显示的是name
source: a.ttAdapter(), //绑定a
templates: { //预输入选项的模板
empty: [ //没有搜索到提示信息
'<div class="empty-message">',
'没有人员',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<div><strong>{{name}}</strong> – {{empId}}</div>') //姓名-工号
}
}
});
//查询人员信息
var trList = $("#treeTable tbody tr");
trList.each(function(i) {
var input = $(this).find(".empKey");
$.ajax({
url : "${ctx}/record/workLoad/getWorkLoadStaff.jhtml",
type : "POST",
data : {'compCode': $("#compCodeId").val(), 'date': $("#date").val(), 'mtrlNo': $(this).find(".mtrlNo").val(), 'proNo': $(this).find(".proNo").val(), 'proName': $(this).find(".proName").val()},
dataType : "json",
success : function(data) {
if(data.isok=='Y'){
for (var i = 0; i < data.map.users.length; i++) {
input.tagsinput('add', {'empId': data.map.users[i].empId, 'name': data.map.users[i].name});
}
}else if(data.isok=='N'){
}
},
error:function(){
}
});
});
});
</script>
getNameJson
返回的是List<User>
,然后每个User
里面都有empId
和name
字段。先是用Bloodhound来获取所有所有人员信息,再通过source: a.ttAdapter(),
来绑定到input上。
itemValue : 'empId',
itemText : 'name',
分别设置了提交数据时后台的接收值和页面的显示值。
input.tagsinput('add', {'empId': data.map.users[i].empId, 'name': data.map.users[i].name});
这里则是在编辑的时候预先在input里面放入后台保存的数据。
效果展示:
需要注意的是
var input = $(this).find(".empKey");
因为我使用过foreach来展示多笔数据,所以通过input的id来add数据怎么都没反应,我的id也不是重复的,但就是没用。后来通过class获取input之后才成功。
另外我在typeahead里面使用了templates,所以需要引入mustache.min.js
。
顺带分享一下keyword.css
,不是我自己写的,但还挺好看的。
@CHARSET "UTF-8";
.bootstrap-tagsinput{
width: 100%;
padding: 4px 12px;
outline: none;
}
.bootstrap-tagsinput .label{
font-size: 100%;
}
.bootstrap-tagsinput input{
height: 22px;
line-height: 22px;
}
.tt-hint{
color:#999;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-menu {
width: 300px;
margin: 12px 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 14px;
line-height: 24px;
}
.tt-suggestion:hover {
cursor: pointer;
color: #fff;
background-color: #0097cf;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
.gist {
font-size: 14px;
}