第一百八十一节，jQuery-UI，知问前端--自动补全 UI--邮箱自动补全

jQuery-UI，知问前端--自动补全 UI--邮箱自动补全

 

学习要点：

　　1.调用 autocomplete()方法

　　2.修改 autocomplete()样式

　　3.autocomplete()方法的属性

　　4.autocomplete()方法的事件

　　5.autocomplete 中使用 on()

 

自动补全（autocomplete），是一个可以减少用户输入完整信息的 UI 工具。一般在输 入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。

 

一．调用 autocomplete()方法

autocomplete()方法，输入框搜索数据源自动补全方法，有一个必填属性，参数是接收一个对象

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq
        });

 

二．修改 autocomplete()样式

由于 autocomplete()方法是弹窗，然后鼠标悬停的样式。我们通过 Firebug 想获取到悬停 时背景的样式，可以直接通过 jquery.ui.css 里面找相应的 CSS。

//无须修改 ui 里的 CSS，直接用 style.css 替代掉
.ui-menu-item a.ui-state-focus {
　　background:url(../img/ui_header_bg.png);
}

注意：其他修改方案类似。

 

三．autocomplete()方法的属性

自动补全方法有两种形式：1.autocomplete(options)，options 是以对象键值对的形式传参， 每个键值对表示一个选项；2.autocomplete(\'action\', param)，action 是操作对话框方法的字符 串，param 则是 options 的某个选项。

 

autocomplete 外观选项

disabled false/布尔值 设置为 true，将禁止显示自动补全。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            disabled : true       //disabled false/布尔值 设置为 true，将禁止显示自动补全。
        });

 

source 无/数组 指定数据源，可以是本地的，也可以是远程的。，可以是各种数据类型

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            disabled : true       //disabled false/布尔值 设置为 true，将禁止显示自动补全。
        });

 

minLength 1/数值 默认为 1，触发补全列表最少输入字符数。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            minLength : 2       //minLength 1/数值 默认为 1，触发补全列表最少输入字符数。
        });

 

delay 300/数值 默认为 300 毫秒，延迟显示设置。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            delay : 0       //delay 300/数值 默认为 300 毫秒，延迟显示设置。
        });

 

autoFocus false/布尔值 设置为 true 时，第一个项目会自动被选定。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            autoFocus : true       //autoFocus false/布尔值 设置为 true 时，第一个项目会自动被选定。
        });

 

autocomplete 页面位置选项

 

position 无/对象使用对象的键值对赋值，有两个属性：my 和 at表示坐标。my 是以目标点左上角为基准，at 以目标点右下角为基准。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            position : {
                // my : \'left top\'  //设置提示框相当对于元素出现的横坐标，设置提示框相当对于元素出现的竖坐标
                my : \'left center\',
                at : \'right+5 center\'
            }
        });

 

四．autocomplete()方法的事件

除了属性设置外，autocomplete()方法也提供了大量的事件。这些事件可以给各种不同状 态时提供回调函数。这些回调函数中的 this 值等于对话框内容的 div 对象，不是整个对话框 的 div。

autocomplete 事件选项

create当自动补全被创建时会调用 create 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            create : function () {      //create当自动补全被创建时会调用 create 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。
                alert(\'创建时\');
            }
        });

 

open当自动补全被显示时，会调用 open 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

 

close 当自动补全被关闭时，会调用 close 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

 

focus当自动补全获取焦点时，会调用 focus 方法，该方法有两个参数(event, ui)。此事件中的 ui 有一个子属性对象 item，分别有两个属性：label，补全列表显示的文本；value，将要输入框的值。一般 label 和 value 值相同。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            focus : function (event, ui) {
                alert(ui.item.value);
            }
        });

 

select 当自动补全获被选定时，会调用 select 方法，该方法有两个参数(event, ui)。此事件中的 ui 有一个子属性对象 item，分别有两个属性：label，补全列表显示的文本；value，将要输入框的值。一般 label 和 value 值相同。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            select : function (event, ui) {
                alert(ui.item.value);
            }
        });

 

change当自动补全失去焦点且内容发生改变时，会调用 change方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

 

search 当自动补全搜索完成后，会调用 search 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

 

response当自动补全搜索完成后，在菜单显示之前，会调用response 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数有一个子对象 content[数组]，他会返回 label 和 value值，可通过遍历了解。

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq,
            response : function (event, ui) {
                alert(ui.content[0].value);
            }
        });

注意：其他事件选项使用相同

 

autocomplete(\'action\', param)方法

autocomplete(\'close\') jQuery 对象 关闭自动补齐

 

autocomplete(\'disable\') jQuery 对象 禁用自动补齐

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq
        });
        $(\'#reg #email\').autocomplete(\'disable\');  //禁用自动补齐

 

autocomplete(\'enable\') jQuery 对象 启用自动补齐

 

autocomplete(\'destroy\') jQuery 对象 删除自动补齐，直接阻断。

 

autocomplete(\'widget\') jQuery 对象 获取工具提示的 jQuery 对象

 

autocomplete(\'search\',value) jQuery 对象 在数据源获取匹配的字符串。value值会代替输入框输入字符补全

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq
        });
        $(\'#reg #email\').autocomplete(\'search\',\'a\');  //value值会代替输入框输入字符补全,不输入内容也会按照a补全

 

autocomplete(\'option\', param) 一般值 获取 options 属性的值，获取方法属性，第二个参数要获取的属性名称

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq
        });
        alert($(\'#reg #email\').autocomplete(\'option\', \'source\'));

 

autocomplete(\'option\', param,value)jQuery 对象 设置 options 属性的值，设置属性值，第二个参数是要设置的属性名称，第三个参数是要设置的属性值

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq
        });
        alert($(\'#reg #email\').autocomplete(\'option\', \'source\',\'aaaaa\'));

注意：其他使用相同

 

五．autocomplete 中使用 on()

在 autocomplete 的事件中，提供了使用 on()方法处理的事件方法。

on()方法触发的自动补全事件

autocompleteopen 显示时触发

        var buq = [\'aaa@163.com\', \'bbb@163.com\', \'ccc@163.com\']; //自动补全数据源
        $(\'#reg #email\').autocomplete({        //将邮箱执行自动补全方法
            source : buq
        });
        $(\'#reg #email\').on(\'autocompleteopen\',function () {
            alert(\'显示时触发\');
        });

 

autocompleteclose 关闭时触发

 

autocompletesearch 查找时触发

 

autocompletefocus 获得焦点时触发

 

autocompleteselect 选定时触发

 

autocompletechange 改变时触发

 

autocompleteresponse 搜索完毕后，显示之前

 

 

邮箱自动补全

学习要点：

　　1.数据源 function

　　2.邮箱自动补全

本节课，我们通过自动补全 source 属性的 function 回调函数，来动态的设置我们的数 据源，以达到可以实现邮箱补全功能。

 

一．数据源 function

自动补全 UI 的 source 不但可以是数组，也可以是 function 回调函数。提供了自带的两 个参数设置动态的数据源。

数据源回调函数参数request, response

 

        $(\'#email\').autocomplete({
            source: function (request, response) {
                alert(request.term); //可以获取你输入的值
                response([\'aa\', \'aaaa\', \'aaaaaa\', \'bb\']); //展示补全结果
            }
        });

 

注意：这里的 response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈 现出来。因为 source 数据源，本身就是给你动态改变的，就由你自定义，从而放弃系统内 置的搜索能力。

 

二．邮箱自动补全

$(\'#email\').autocomplete({
            autoFocus: true,
            delay: 0,
            source: function (request, response) {
                var hosts = [\'qq.com\', \'163.com\', \'263.com\', \'gmail.com\', \'hotmail.com\'], //起始
                    term = request.term,        //获取输入值
                    ix = term.indexOf(\'@\'),     //@
                    name = term,                //用户名
                    host = \'\',                  //域名
                    result = [];                //结果
                //结果第一条是自己输入
                result.push(term);
                if (ix > -1) { //如果有@的时候
                    name = term.slice(0, ix); //得到用户名
                    host = term.slice(ix + 1); //得到域名
                }
                if (name) {
                    //得到找到的域名
                    var findedHosts = (host ? $.grep(hosts, function (value, index) {
                            return value.indexOf(host) > -1;
                        }) : hosts),
                        //最终列表的邮箱
                        findedResults = $.map(findedHosts, function (value, index) {
                            return name + \'@\' + value;
                        });
                    //增加一个自我输入
                    result = result.concat(findedResults);
                }
                response(result);
            }
        });