非常好用的JQuery自動補全外掛程式bigautocomplete，jquery自動補全外掛程式

非常好用的JQuery自動補全外掛程式bigautocomplete，jquery自動補全外掛程式

自動補全外掛程式，有些功能有限，有些是老外做的，不支援中文。今天發現一個國人做的，叫做bigautocomplete，還不錯。

官網：http://code.google.com/p/jquery-bigui/downloads/list

如果不想翻牆的話，可以從這裡下載（已經轉碼為UTF-8）：http://download.csdn.net/detail/clementad/8917219

使用步驟：

1、把兩個js和css檔案放到項目中：

2、在項目頁面中引用：

<script src="./resources/bigui/jquery.bigautocomplete.js" charset="UTF-8" type="text/javascript"></script><link rel="stylesheet" href="./resources/bigui/jquery.bigautocomplete.css" type="text/css" />

3、定義用來搜尋的text input，id為tcSearch：

<tr><th>用例搜尋</th><td><input type="text" id="tcSearch"  size="80" /><input type="button" value="清空" onClick="$('#tcSearch').val('');"></td></tr>

4、定義被搜尋的數組對象（數組中的每一個對象都有包含title屬性，控制項搜尋的就是title中的內容）：

var testCases = [{title : "0.1 用Map接收前端提交的Form Data或Query String",url : "/mapParameter/map",requestBody : "authCode=123456&accountName=15888888888&password=888962&password=666566"},{title : "0.2 用MultiValueMap接收前端提交的Form Data或Query String",url : "/mapParameter/multiValueMap",requestBody : "authCode=123456&phone=15888888888&verifyType=0&verifyType=1"},{title : "0.3 用Map接收前端提交的json格式的Request Payload",url : "/mapParameter/jsonParams",requestBody : '{"authCode":"123456","phone":"15888888888","code":0,"code":1}',contentType : "application/json;charset=utf-8"},{title : "1.1 測試Guava緩衝AreaIdToArea",url : "/cache/test/getArea",requestBody : "areaId=4401"}];

5、在初始化函數中調用bigAutocomplete函數，註冊被搜尋的內容和回呼函數：

//系統初始化：$(function() {rootPath = getRootPath();$("#tcSearch").bigAutocomplete({data : testCases,    callback : function(data){$("#url").val(rootPath + data.url);$("#params").val(JSON.stringify( JSON.parse(decodeURI(data.requestBody)), null, "\t"));$("#tcTitle").val(data.title);}});});

註：bigAutocomplete的參數說明：

$("xxxxx").bigAutocomplete({data:[...],url:"",width:0,callback:{}})

參數	說明
data(可選)：	data：格式{data:[{title:null,result:{}},{title:null,result:{}}]}url和data兩個參數必須有一個，且只有一個生效，data優先。
url(可選)：	url為字串，用來ajax後台擷取資料，返回的資料格式為data參數一樣。
width(可選)：	下拉框的寬度，預設使用輸入框寬度。
callback(可選)：	選中行後按斷行符號或單擊時回調的函數，用於返回選中行的其他資料及做一些操作。

6、測試效果，搜尋結果出現在下拉式功能表中（輸入中文也支援）：

（原創文章，轉載請註明