很是好用的JQuery自動補全插件bigautocomplete

<script src=./resources/bigui/jquery.bigautocomplete.js charset=UTF-8 type=text/javascript></script>

定義用來搜索的text input，id爲tcSearch：

<input id="tcSearch" size="80" type="text">
<input onclick="$('#tcSearch').val('');" type="button" value="清空">

定義被搜索的數組對象（數組中的每個對象都有包含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
    }
];

五、在初始化函數中調用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,   ));
            $(#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(可選)：	選中行後按回車或單擊時回調的函數，用於返回選中行的其餘數據及作一些操做。

測試效果，搜索結果出如今下拉菜單中（輸入中文也支持）：