jquery-ui autocomplete 結合ajax實現自動完成搜尋框匹配
autocomplete結合ajax實現自動完成搜尋框匹配
前言:之前從未接觸過autocomplete,之後想網上學習別人寫的,也許外掛版本不同網上各種寫法都有,眼花繚亂,一個頭兩個大,因此想記錄一下
實現如圖所示效果:
首先我們需要在html程式碼中引入jquery檔案,然後引入jquery-ui的js檔案和css檔案
html程式碼
<link rel="stylesheet" href="css/base/jquery-ui-1.9.2.custom.css" /> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
這裡有一點要注意的地方:
匯入的jquery版本不能低於1.6,只有jquery1.6以上才支援此版本的autocomplete
下面在html頁面定義一個帶id的input標籤
<input type="text" id="queryname" name="queryname" />
<input type="text" id="queryid" name="queryid" />
在下就不用靜態資料舉例了(在下給的第一個下載連線裡面有個Demo就是用的最簡單的靜態陣列做的,各位如果不懂的話可以看一下),直接結合ajax了ha
javascript程式碼
<script type="text/javascript"> $("#queryname").autocomplete({ source : function(request, response) { // request物件只有一個term屬性,對應使用者輸入的文字 // response在你自行處理並獲取資料後,將JSON資料交給該函式處理,以便於autocomplete根據資料顯示列表 $.ajax({ url : "MailAction.do?method=autocompleteUser", type : "post", dataType : "json", data : { "query" : request.term // 獲取輸入框內容 }, success : function(data) { response($.map(data, function(item) { // 此處是將返回資料轉換為 JSON物件 return { label : item.label, // 下拉項顯示內容 value : item.value // 下拉項對應數值 //另外可以自定義其它引數 } })); } }); }, select : function(event, ui) { //event引數是事件物件,ui物件只有一個item屬性,對應資料來源中被選中的物件 $("#queryname").val(ui.item.label); $("#queryid").val(ui.item.value); return false; } }); </script>
java程式碼就不貼了,後臺返回一個JSONArray的json陣列(如[ {"label":"你很皮","value":"1"},{"label":"略皮略皮","value":"2"} ])或者字串陣列如(["a","b","c"])等等都行,根據需求而定。
另外列幾種開發中可能出現的問題(因為這些問題在下TM都遇到過):
1.autocomplete的下拉列表可能被其它元件遮住,那是因為autocomplete的z-index值太小,在下在網上看到的解決問題方法是寫個css樣式 .ui-autocomplete{ z-index: 9999; }結果試了一下沒有效果,後來才發現該autocomplete版本的z-index是寫在行內的(發現真相的我眼淚掉下來),將樣式改為.ui-autocomplete{ z-index: 9999 !important; }就解決了。
2.如果頁面中也用到了EasyUI外掛的,需要將autocomplete檔案放在EasyUI之後,原因:autocomplete 自動把依賴的menu模組加入進來,而EasyUI也有自己的menu,然後它們兩個模板就開始打架了,匯入檔案順序如下:
<link rel="stylesheet" href="${basepath}/pages/newmail/jquery-ui-1.9.2.custom/css/base/jquery-ui-1.9.2.custom.css" />
<script type="text/javascript" src="${basepath}/webresource/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="${basepath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${basepath}/js/easyui/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${basepath}/js/easyui/jquery.calendar.js"></script>
<script type="text/javascript" src="${basepath}/pages/newmail/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
至此功能全部完成,謝謝各位老闆。