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