自动完成--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插件的更多相关文章
- jquery 自动完成 Autocomplete插件汇总
1. jQuery Autocomplete Mod jQuery Autcomplete插件.能够限制下拉菜单显示的结果数. 主页:http://www.pengoworks.com/worksho ...
- JQuery easyui里面的自动完成autocomplete插件
默认功能 当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议.在本实例中,提供了编程语言的建议选项,您可以输入 "ja" 尝试一下,可以得到 Java 或 ...
- 自动完成--autoComplete插件(2)
远端的也可以成为本地的数据 4) lookupLimit 类型:数字 说明:本地数据显示的最大条数,服务器段的没有效果,服务器端的可以后台设置 默认:没有限制 5) lookupFilter 类型: ...
- 推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput
前言 今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的.不信,你试试就知道^_^... Au ...
- GBin1插件推荐之马可波罗（Marco Polo)，jQuery的自动补齐插件 - Autocomplete Plugin
让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...
- Jquery autocomplete插件的使用
简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...
- Jquery autocomplete 插件示例
通过Jquery autocomplete 插件动态传递输入参数完成自动完成提示: <%@ page language="java" import="java.ut ...
随机推荐
- FMDB处理动态插入语句
昨天做一个需求,参数的数量不确定,所以无法使用这个API: - (BOOL)executeUpdate:(NSString*)sql, ... 但是用 - (BOOL)executeUpdate:(N ...
- Nginx 使用IP限制访问来源
在 server {... 下, 或者在 location xxx {... 下, 都可以添加如下的IP访问限制 allow 10.57.22.172; allow ; allow ; allow ; ...
- usb驱动开发13之设备生命线
上一节勉勉强强把struct urb这个中心给说完,接着看那三个基本点. 第一个基本点,usb_alloc_urb函数,创建urb的专用函数,为一个urb申请内存并做初始化,在drviers/usb/ ...
- 使用spring boot+mybatis+mysql 构建RESTful Service
开发目标 开发两个RESTful Service Method Url Description GET /article/findAll POST /article/insert 主要使用到的技术 j ...
- VS2013 抛出 stackoverflow exception 的追踪
本公司使用VWG.Caslte ActiveRecord.CSLA.net .Quantz.net 等组件做为公司的开发基础,自2007年以来,一直工作正常,但最近(2015.12月)以来,打开MDA ...
- quartz.net 项目无法加载的问题
最近尝试试用一下quartz.net 做任务调度用. 下载了源代码后打开解决方案发现项目无法加载.错误如下 未找到导入的项目“C:\Users\****\Desktop\Quartz.NET-2.1. ...
- JS添加DOM元素CSS权重BUG
修改删除table的时候,比如拆分合并单元格,合并全部TR中的某个TD后在拆分还原,即使直接在td标签中设置了td的高宽属性,当td在css文件中设置为宽度auto的时候,不能显示出TD来,显示TD宽 ...
- spring WebSocket详解
场景 websocket是Html5新增加特性之一,目的是浏览器与服务端建立全双工的通信方式,解决http请求-响应带来过多的资源消耗,同时对特殊场景应用提供了全新的实现方式,比如聊天.股票交易.游戏 ...
- Redis学习笔记（一）
一.Redis入门概述 1.是什么? (1)全称:REmote DIctionary Server(远程字典服务器).是完全开源免费的,用C语言编写的, 遵守BCD协议.是一个高性能的(key/val ...
- Oracle On 、Where、Having 区别
ON .WHERE.HAVING都能通过限制条件筛选数据,但他们的使用及其不同.下面我们来分析三者之间的区别. 1. ON 和WHERE 所有的查询都回产生一个中间临时报表,查询结果就是从返回临时报表 ...