第一百八十一节，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);
            }
        });