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插件的更多相关文章

  1. jquery 自动完成 Autocomplete插件汇总

    1. jQuery Autocomplete Mod jQuery Autcomplete插件.能够限制下拉菜单显示的结果数. 主页:http://www.pengoworks.com/worksho ...

  2. JQuery easyui里面的自动完成autocomplete插件

    默认功能 当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议.在本实例中,提供了编程语言的建议选项,您可以输入 "ja" 尝试一下,可以得到 Java 或 ...

  3. 自动完成--autoComplete插件(2)

    远端的也可以成为本地的数据 4) lookupLimit 类型:数字 说明:本地数据显示的最大条数,服务器段的没有效果,服务器端的可以后台设置 默认:没有限制 5) lookupFilter 类型: ...

  4. 推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput

    前言 今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的.不信,你试试就知道^_^... Au ...

  5. GBin1插件推荐之马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin

    让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...

  6. PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...

  7. Jquery autocomplete插件的使用

    简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  8. 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...

  9. Jquery autocomplete 插件示例

    通过Jquery autocomplete 插件动态传递输入参数完成自动完成提示: <%@ page language="java" import="java.ut ...

随机推荐

  1. 针对苹果最新审核要求为应用兼容IPv6

    在WWDC2015上苹果宣布iOS9将支持纯IPv6的网络服务.2016年初开始所有提交到App Store的应用必须支持IPv6.为确保现有的应用是兼容的,我们需要注意下面几点. 不建议使用底层的网 ...

  2. PL/SQL Transaction Control

    PL/SQL 基础 ( 下 )   1. PL/SQL中的 SQL语句 - END语句与COMMIT等内容,没有任何关系. - PL/SQL does not directly support dat ...

  3. BZOJ 1096 【ZJOI2007】 仓库建设

    Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在露天,以节省费用.突然有一天, ...

  4. ORACLE对时间日期的处理(转)

    共三部分: 第一部分:oracle sql日期比较: http://www.cnblogs.com/sopost/archive/2011/12/03/2275078.html 第二部分:Oracle ...

  5. intellij idea 高级用法之:集成JIRA、UML类图插件、集成SSH、集成FTP、Database管理

    之前写过一篇IntelliJ IDEA 13试用手记,idea还有很多高大上的功能,易用性几乎能与vs.net媲美,反正我自从改用idea后,再也没开过eclipse,今天来看几个高级功能: 一.与J ...

  6. 【福吧资源网整理】老男孩-python运维6期 不加密

    老男孩-python运维6期 不加密,连夜整理出来分享给大家老男孩的python教程确实不错. 教程目录: 下载地址:http://www.fu83.cn/thread-204-1-1.html  

  7. node 学习笔记 - Modules 模块加载系统 (2)

    本文同步自我的个人博客:http://www.52cik.com/2015/12/14/learn-node-modules-module.html 上一篇讲了模块是如何被寻找到然后加载进来的,这篇则 ...

  8. Java 增强型的for循环 for each

    Java 增强型的for循环 for each For-Each循环 For-Each循环也叫增强型的for循环,或者叫foreach循环. For-Each循环是JDK5.0的新特性(其他新特性比如 ...

  9. Cadence 建立封装:多个引脚于芯片内部连接的封装建立方式

    Ti 家有一种片子,型号为CSD19534Q5A.此芯片的外观样式如图: 可以看到,这个片子共有8个引脚,其中5.6.7和8这四个引脚的内部是连接在一起的. Ti 在数据手册中也介绍了封装的样式: 下 ...

  10. java发送邮件

    1.需要用到javax.mail怎么下载呢?百度javax.mail就会看见http://www.oracle.com/technetwork/java/index-138643.html实际上这个项 ...