自动完成--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 ...

随机推荐

微软架构师解读Windows Server 2008 R2新特性
目前众多企业都开始为自己寻找一个更加适合自身发展的服务器操作平台.微软的Windows Server 2008 R2就是可以为大家解决服务器平台问题.微软最新的服务器平台Windows Server ...
selmodel
selmodel不仅可以设置checkbox,还可以设置单元格选中模式,列选择模式,行选择模式
workqueue机制分析之process_one_work分析
工作者线程不断执行,从work_poll结构中卸下一个work, 然后进入函数process_one_work 来执行这个work. process_one_work(struct worker *w ...
【WPF】TextBox样式重写注意事项
1.普通控件重写需要添加一行 <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="C ...
[LINK]OpenResty
http://openresty.org/ http://www.tuicool.com/articles/M3yI3y http://www.oschina.net/question/28_6046 ...
Cordova - 使用Cordova开发iOS应用实战5（获取手机里照片，并编辑）
使用Cordova可以很方便的通过js代码读取系统相簿里面的照片,同使用设备摄像头拍照一样,同样需要先添加camera插件. 一,添加camera插件首先我们要在“终端”中进入工程所在的目录,然后运 ...
SQL Server读懂语句运行的统计信息 SET STATISTICS TIME IO PROFILE ON
对于语句的运行,除了执行计划本身,还有一些其他因素要考虑,例如语句的编译时间.执行时间.做了多少次磁盘读等. 如果DBA能够把问题语句单独测试运行,可以在运行前打开下面这三个开关,收集语句运行的统计信 ...
无法连接windows虚拟机oracle的解决办法
在mac机上玩基于oracle db的开发真心不容易,oracle公司死活不出oracle express edition for mac OS,曾经发布过的oracle 10 for mac下载地址 ...
Oracle PL/SQL 入门
PL/SQL 全称:Procedure Language/SQL.产生背景自己去百度. 模板: Declare ---变量定义 num ; name ) := 'damon'; idesc cnt_i ...
让 innerHTML 进来的 script 代码跑起来
今天来简单聊聊如何让 innerHTML 进来的 scrip 代码跑起来的问题. 前台请求一个接口,接口返回一些 HTML 标签拼接成的字符串,以供前端直接 innerHTML 生成 DOM 元素,这 ...

自动完成--autoComplete插件

自动完成--autoComplete插件的更多相关文章

随机推荐

热门专题