自动完成--autoComplete插件

最新推荐文章于 2023-05-12 14:26:49 发布

afei2530

最新推荐文章于 2023-05-12 14:26:49 发布

阅读量209

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/rocky-AGE-24/p/5517948.html

版权

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;
    }
}

转载于:https://www.cnblogs.com/rocky-AGE-24/p/5517948.html

afei2530

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自动完成--autoComplete插件

js下载地址:https://github.com/devbridge/jQuery-Autocomplete1.引入js,引入css--start---------------------------------------------------------------------------------------------1.autoComplete()方法$(...
复制链接

扫一扫