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

页面导航:首页 > 网络编程 > JavaScript > 非常好用的JQuery自动补全插件bigautocomplete

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

来源: 作者: 时间:2016-01-22 08:39 【

自动补全插件,有些功能有限,有些是老外做的,不支持中文。今天发现一个国人做的,叫做bigautocomplete,还不错。官网下载地址:http: code google com p jquery-bigui downloads list如果不想翻墙

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

 

使用步骤:

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

\

 

2、在项目页面中引用:

 

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

3、定义用来搜索的text input,id为tcSearch:

 

 

		
			用例搜索
			
				
			
			

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

\

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<