非常好用的JQuery自动补全插件bigautocomplete-白红宇

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

阅读量：6335 次

发布时间：2019-06-22

本文共 1615 字，大约阅读时间需要 5 分钟。

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

定义被搜索的数组对象（数组中的每一个对象都有包含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(可选)：	选中行后按回车或单击时回调的函数，用于返回选中行的其他数据及做一些操作。