自动完成--autoComplete插件
Posted 牵牛花
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自动完成--autoComplete插件相关的知识，希望对你有一定的参考价值。
js下载地址:https://github.com/devbridge/jQuery-Autocomplete
1.引入js,引入css
--start---------------------------------------------------------------------------------------------
1.autoComplete()方法
$(selector).autoComplete(配置对象);
具体使用
配置属性
1) lookup
类型:字符串数组或者对象数组
说明:使用本地数据注:如果是对象数组则提示的信息使用value属性(必须的)来指定,对象的其他成员随便设置
案例:
var data=[‘孙胜利‘,‘私房库‘];
或者标准的格式应该是下面这样:
var data = [{value:‘孙胜利‘,data:‘sunshengli‘},{value:‘私房库‘,data:‘http:sifangku.com‘}];
对象内还可以添加其他各种各样需要的数据!
2) onSelect
类型:function (suggestion){}
说明:用户从提示信息中选择时执行的回调函数,回调函数内部的this代码
当前的input控件
参数说明:suggetsion:具体选择的数据,(就是点击或者按enter建之后选择的数据,如果是对象这会吧这个对象返回)
如果只有字符串.那么返回的也是一个对象,有value和data属性
这个函数里面也可以做提交.....
3) minChars
类型:数字
说明:最少输入几个字符时进行自动提示
默认:1(如果设为0 ,则直接提示)
11) serviceUrl
类型: 字符串或者回调函数
说明:服务器段url地址,如果是函数则在函数内部返回服务器的Url地址即可,如果使用本地的数据则省略本参数即可
注意:服务器端返回数据需符合以下格式
{
"suggestions":["sunshengli","sifangku"]
}或者
{
"suggestions":[{"value":"sunshengli","data":"haahha"},{"value":"sunshengli","data":"haahha"}]
}
13) paramName
类型: 字符串
说明: 将用户填写的数据发送给服务器时使用的名称
默认: query
15) deferRequestBy
类型:数字
说明:延迟Ajax请求的毫秒数,(减轻服务器压力可以稍微给一线延迟)
默认:0
16) nocache
类型:布尔值
说明:是否不缓存自动提示的数据,如果设置为true,则不会对数据进行缓存,那么用户输入相同查询内容的时候也会对服务器发起请求
默认:false(即默保留缓存)
27) formatResult
类型:function (suggestion,currentValue){}
说明:格式化返回的数据,有多少条数据,这个函数就执行多少次
函数参数说明:suggetion:当前执行时的提示数据
currentValue: 用户输入的查询的数据
格式化后的数据需要使用return返回
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String nameSpace = request.getContextPath(); %> <% String projectPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + nameSpace + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>测试autoComplete</title> <script src="<%=projectPath%>js/jquery-1.12.1.js"></script> <script src="<%=projectPath%>js/autoComplete/jquery.autocomplete.js"></script> <link rel="stylesheet" type="text/css" href="<%=projectPath%>style/styles.css"> <script type="text/javascript"> $(function() { var mydata = [ { value : ‘孙胜利‘, data : ‘sunshengli‘ }, { value : ‘私房库‘, data : ‘http:sifangku.com‘ }, { value : ‘罗琪‘, data : ‘luoqi‘ }, { value : ‘罗志祥‘, data : ‘qq‘ }, { value : ‘罗志吉‘, data : ‘ww‘ } ]; $("#autocomplete").autocomplete( { //lookup : mydata, onSelect:function(suggestion) {//函数的参数都是形参!!! console.log(suggestion); }, //minChars:2, serviceUrl:‘/sfk_BBS02/getNameList‘, formatResult:function(suggestion,currentValue){ return ‘<div>‘+suggestion.value+suggestion.count+‘</div>‘ } }); }); </script> </head> <body> <!-- 测试autoComplete --> <form> 姓名:<input id="autocomplete" type="text" name="abc"> </form> </body> </html>
java
@ResponseBody @RequestMapping("/getNameList") public String getNameList() { /*** * { "suggestions":[{"value":"sunshengli","data":"haahha"},{"value":"sunshengli","data":"haahha"}] } */ log.info("into getNameList"); String names = "{\"suggestions\":[\"sunshengli\",\"罗志祥\",\"罗志志\",\"sifangku\"]}"; String names2 = "{\"suggestions\":[{\"value\":\"sunshengli\",\"data\":\"hahahah\",\"count\":10},{\"value\":\"luozhizhi\",\"data\":\"qq\",\"count\":10}]}"; return names2; } }
以上是关于自动完成--autoComplete插件的主要内容，如果未能解决你的问题，请参考以下文章
framework7 Autocomplete (自动完成) 具体使用
JQuery easyui里面的自动完成autocomplete插件