当前位置:首页 > 公司荣誉 >

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

作者:永年县聚联紧固件制造有限公司    发布时间:2017-09-13 12:50:17

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

自动补全插件,有些功能有限,有些是老外做的,不支持中文。今天发现一个国人做的,叫做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、测试效果,搜索结果出现在下拉菜单中(输入中文也支持):

\

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网站制作公司哪家好 https://www.feimao666.com

  • 上一篇:Python编程-)cannot open file #39;python27_d.lib#39
  • 下一篇:最后一页
  •