jquery.autocomplete.js 使用備忘

涉及項目： tms

參考文章：有關 Autocomplete的使用 ， jQuery.Autocomplete 中文支援

具體情況：支援中文過濾，支援内部比對； 當無符合比對條件的内容時，應當給出提示（TODO）

//自動補全 教師/雇員 資訊時的初始化  @author RanWeizheng
//依賴于jquery.auto_complete.js ,  common_util.js(擷取contextPath)
//由于業務需求，要求展現 教師name 同時儲存教師的id，故這裡需要分别填寫nameSelector、idSelector
/*
 	private int userId;
	private String title;
	private String pinyin;
	private String jianpin;
	private String userNo;//員工号
	private Integer departmentId;
	private Integer gender;
	private String depName;//部門名稱
	private String genderName;//性别名稱
 *
 */
function init_autocomplete_employee_ajax(nameSelector, idSelector, depId){
	var data = {};
	if (typeof(depId)!="undefined" && depId >0){
		data = {dep_id: depId};
	}
	$.ajax({
    	type: "POST",
    	dataType: 'json',
    	//傳回 json資料
    	url: getContextPath() + '/dict/get_teacher_json.do',
    	data: data,
    	success: function(data) {
    		var jsonObj = data.data;
    		init_autocomplete_employee(nameSelector, idSelector, jsonObj);
    	}
    });
}

function init_autocomplete_employee(nameSelector, idSelector, jsonObj){
			
			var $name = $(nameSelector);
			if (typeof($name.autocomplete) != null){
				$name.unautocomplete();
			}
			$name.autocomplete(jsonObj, {
					minChars: 0,
					matchCase:false,//不區分大小寫
					autoFill: false,
					mustMatch: true,
					matchContains:true,//是否要在字元串内部檢視比對,如ba是否與foo bar中的ba比對.
					multiple: false,
					max: 10,
					formatItem: function(row, i, max, term) {//格式化清單中的條目
						console.log("formatItem");
						var result ;
						if ( row.depName!=""){
							result = row.title+ "(" + row.depName + ") " + row.genderName + " " + row.userNo;
						} else {
							result = row.title +" " + row.depName + " " + row.userNo;
						}
						return  result;
					},
					formatMatch: function(row, i, max) {//對每一行資料使用此函數格式化需要查詢的資料格式. 傳回值是給内部搜尋算法使用的. 參數值和formatItem的參數一樣。
						console.log("formatMatch");
						var result ;
						if ( row.depName!=""){
							result = row.title+ "-" + row.pinyin+ "-" + row.jianpin+ "-(" + row.depName + ") " + row.genderName + " " + row.userNo;
						} else {
							result = row.title+ "-" + row.pinyin+ "-" + row.jianpin+ "- " + row.depName + " " + row.userNo;
						}
						return  result;
					}, 
					formatResult: function(row) {//被選中時輸出的内容
						console.log("formatResult");
						return row.title;
					}
//					,
//					
//					reasultSearch:function(row,v)	// 自定義查詢文法 注意這是新加的事件--為什麼要用？
//					{
//						console.log("reasultSearch");
//						var v_string = $.trim($name.val());
//						if (v_string == "")
//							$(idSelector).val("");
//						var name_flag = row.data.title.indexOf(v) >= 0 ;
//						//自定義在pinyin或jianpin中比對
//						if( name_flag 
//							|| (row.data.pinyin!=null && row.data.pinyin.indexOf(v) >= 0) 
//							|| (row.data.jianpin!=null && row.data.jianpin.indexOf(v) >= 0) ){
//							console.log("true");
//							return row;
//						} else {
//							console.log("false");
//							return false;
//						}		
//					}
					
			});//autocomplete()
			
			$name.result(function(event, data, formatted){//當某一項被選中時
						if(typeof(data) != 'undefined' && typeof(formatted) != 'undefined' && formatted!=''){
							$(idSelector).val(data.userId);
						}
					});//result
			
		}//init_autocomplete_employee()