bassistance.de的JQuery Autocomplete 使用实例

最新推荐文章于 2021-07-25 18:35:20 发布

a304316409

最新推荐文章于 2021-07-25 18:35:20 发布

阅读量831

点赞数

文章标签： autocomplete jquery function input stylesheet attributes

bassistance.de的JQuery Autocomplete 使用实例

2012-04-19 10:10:45| 分类：编程-jquery | 标签：jquery autocomplete |字号大中小订阅

jQuery的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de的JQuery Autocomplete plugin比较强大，我们就来写一些代码感受一下。

jquery-autocomplete配置：

首先是一个最简单的Autocomplete（自动完成）代码片段：

            $(function() {
                var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
                $('#keyword').autocomplete(data).result(function(event, data, formatted) {
                    alert(data);
                });
            });

    <body>
        <form id="form1" runat="server">
            <div>
                <input id="keyword" />
                <input id="getValue" value="GetValue" type="button" />
            </div>
        </form>
    </body>

result方法是jQuery Autocomplete插件里的重要方法，它在用户在选定了某个条目时触发。data参数为选中的数据。

一个稍微复杂的例子，可以自定义提示列表:

            var emails = [
                { name: "Peter Pan", to: "peter@pan.de" },
                { name: "Molly", to: "molly@yahoo.com" },
                { name: "Forneria Marconi", to: "live@japan.jp" },
                { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
                { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
                { name: "Don Corleone", to: "don@vegas.com" },
                { name: "Mc Chick", to: "info@donalds.org" },
                { name: "Donnie Darko", to: "dd@timeshift.info" },
                { name: "Quake The Net", to: "webmaster@quakenet.org" },
                { name: "Dr. Write", to: "write@writable.com" },
                { name: "GG Bond", to: "Bond@qq.com" },
                { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }
            ];

            $(function() {
                $('#keyword').autocomplete(emails, {
                    max: 12,    //列表里的条目数
                    minChars: 0,    //自动完成激活之前填入的最小字符
                    width: 400,     //提示的宽度，溢出隐藏
                    scrollHeight: 300,   //提示的高度，溢出显示滚动条
                    matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                    autoFill: false,    //自动填充
                    formatItem: function(row, i, max) {
                        return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
                    },
                    formatMatch: function(row, i, max) {
                        return row.name + row.to;
                    },
                    formatResult: function(row) {
                        return row.to;
                    }
                }).result(function(event, row, formatted) {
                    alert(row.to);
                });
            });

    <body>
        <form id="form1" runat="server">
            <div>
                <input id="keyword" />
            </div>
        </form>
    </body>

formatItem、formatMatch、formatResult是自定提示信息的关键。

formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体。

formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，

formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。

再来一个使用后台数据返回json数据的例子：

            $(function() {
                //返回json方式，
                var url2="t2.jsp";
                $("#keyword").autocomplete(url2, {
                    matchSubset: false,//缓存问题，默认为true，在缓存中读取
                    autoFill: true,
                    //width: 310,
                    matchContains: true,
                    autoFill: false,
                    dataType:'json',//返回数据类型
                    parse:function(data){ //后台返回的数据传给自定义的rows   
                        var rows=[];
                        for(var i=0;i<data.length;i++){
                            //alert(data[i].email);
                            //一定要按以下格式设置数据
                            
                            rows[rows.length]={
                                data:data[i].email + "dddddddd", //自定义的格式化列表，同上面的formatItem
                                value:data[i].email,//匹配的值，同formatMatch
                                result:data[i].email//返回结果显示内容，同formatResult
                            };
                            
                        }
                        return rows;
                    },
                    formatItem:function(row, i, n) {
                        return "<I>"+row+"</I>"; //使显示的数据为斜体
                    }
                });
            });

t2.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
            response.setContentType("application/json");//这个一定要加
            String remsg = "[{\"email\":\"123@163.com\"},{\"email\":\"456@163.com\"}]";
            out.print(remsg);
%>

首先是最重要的方法

autocomplete( url or data, [options] )

第一个参数可以是数组或者url。

options参数比较复杂：

* minChars (Number):

在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表

* width (Number):

指定下拉框的宽度. Default: input元素的宽度

* max (Number):

autoComplete下拉显示项目的个数.Default: 10

* delay (Number):

击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10

* autoFill (Boolean):

要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false

* mustMatch (Booolean):

如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false

* matchContains (Boolean):

决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false

* selectFirst (Boolean):

如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true

* cacheLength (Number):

缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10

* matchSubset (Boolean):

autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true

* matchCase (Boolean):

比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false

* multiple (Boolean):

是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false

* multipleSeparator (String):

如果是多选时,用来分开各个选择的字符. Default: ","

* scroll (Boolean):

当结果集大于默认高度时是否使用卷轴显示 Default: true

* scrollHeight (Number):

自动完成提示的卷轴高度用像素大小表示 Default: 180

* formatItem (Function):

为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.

* formatResult (Function):

和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

* formatMatch (Function):

对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row

* extraParams (Object):

为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}

result(handler, item)

为选中后触发的事件。item为选中的相。

例如，我们可以在选中后直接跳转页面：

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
location.href = item.url;
});