項目要實現一個功能,就是像添加關鍵字一樣添加人員,同時要做到預輸入查詢。於是就使用了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;
}