1. 程式人生 > >jquery.autocomplete.js 使用備忘

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()