jquery.autocomplete.js 使用備忘
阿新 • • 發佈:2018-11-08
涉及專案: 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()