很是好用的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(可选)：	选中行后按回车或单击时回调的函数，用于返回选中行的其余数据及作一些操做。

测试效果，搜索结果出如今下拉菜单中（输入中文也支持）：