jquery ui 学习随笔 邮箱自动补全

一．数据源function
自动补全UI 的source 不但可以是数组，也可以是function 回调函数。提供了自带的两个参数设置动态的数据源。
$(‘#email‘).autocomplete({
source : function (request, response) {
alert(request.term); //可以获取你输入的值
response([‘aa‘, ‘aaaa‘, ‘aaaaaa‘, ‘bb‘]); //展示补全结果     不论你输入什么，全部都会展示出下拉结果
},
});
注意：这里的response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现出来。因为source 数据源，本身就是给你动态改变的，就由你自定义，从而放弃系统内
置的搜索能力。

$(‘#email‘).autocomplete({
                delay:0,
                source:function(request,response){
                        var hosts=[‘163.com‘,‘123.com‘,‘qq.com‘,‘gmail.com‘,‘sina.com.cn‘],
                            term=request.term,         //获取用户输入的内容
                            host=‘‘,                    //邮箱的域名
                            ix=term.indexOf(‘@‘),        //获取@d的位置
                            name=term,                    //邮箱的用户名
                            result=[];                    //最终的邮箱
                            //当存在@时，重新分配用户名和域名
                            if(ix>-1){
                                name=term.slice(0,ix);
                                host=term.slice(ix+1);
                            }
                            if(name){
                                //如果用户已经输入用户名和域名就找到相关的域名提示

                                //如果用户还没有输入用户名和域名那么就提示所有的域名
                                var findedhosts=[];
                                if(host){
                                    //$.grep使用过滤函数过滤数组元素。
                                    findedhosts=$.grep(hosts,function(value,index){
                                        //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                                        return value.indexOf(host)>-1 ;
                                    })    
                                }
                                else{
                                    findedhosts=hosts;                        
                                }
                                //$.map将一个数组中的元素转换到另一个数组中。
                                var finedResult=$.map(findedhosts,function(value,index){
                                    return name+"@"+value;
                                })
                                result=finedResult;
                            }

                response(result);
        }
    });

<div id="reg" title=‘会员登录‘>
        <p>
            <label for="user">账户:</label>
            <input type="text" name="user" class="text" title="请输入至少含有两个中文的昵称" id="user"/>
            <span class="star">*</span>
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="text" name="password" class="text" title="请输入至少含有六位数的密码" id="password"/>
            <span class="star">*</span>
        </p>
        <p>
            <label for="email">邮箱:</label>
            <input type="text" name="email" class="text" title="请输入正确的邮箱"id="email"/>
            <span class="star">*</span>
        </p>
        <p>
            <label for="">性别:</label>
            <input type="radio" name="sex" class="text"id="male"/><label for="male">男</label><input type="radio" name="sex" class="text"id="female"/><label for="female">女</label>
        </p>
        <p>
            <label for="">生日:</label>
            <input type="text" name="email" class="text" id="bir"/>
        </p>
    </div>