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>

至此功能全部完成，謝謝各位老闆。