tagsinput和typeahead使用指北

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