非常好用的JQuery自动补全插件bigautocomplete

自动补全插件，有些功能有限，有些是老外做的，不支持中文。今天发现一个国人做的，叫做bigautocomplete，还不错。

 

使用步骤：

1、把两个js和css文件放到项目中：

 

2、在项目页面中引用：

 

<code class="java value" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:1em !important;min-height:auto !important;color:rgb(0,153,0) !important;background:none !important;">8</code> <code class="java plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:1em !important;min-height:auto !important;background:none !important;"> type=text/javascript>

3、定义用来搜索的text input，id为tcSearch：

 

 

用例搜索
"tcSearch" size= "80" type= "text" >
    "$('#tcSearch').val('');" type= "button" value= "清空" >

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 ,   ));
            $(#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、测试效果，搜索结果出现在下拉菜单中（输入中文也支持）：