jquery UI邮箱自动补全

浏览数：24 / 时间：2015年06月09日

《1》

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

<html>
<head>
    <title></title>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <input id="email" type="text" />
</body>
</html>

<script type="text/javascript">
    $("#email").autocomplete({
        delay: 0, //默认为300 毫秒，延迟显示设置。
        autoFocus:true, //设置为true 时，第一个项目会自动被选定。

        //request是一个对象，它有一个属性term ，term表示用户输入的内容。

        //response的作用是用来绑定数据源的 例如：response(["aa","aaaa","aaaaaa","bb"])

        source: function (request, response) {

            var hosts = ["qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//邮箱域名集合

            var term = request.term; //获取用户输入的内容；
            var name = term;  //邮箱的用户名
            var host = "";   //邮箱的域名 例如qq.com
            var ix = term.indexOf('@'); //@的位置

            var result = []; //最终呈现的邮箱列表

            

            //当用户输入的数据（email）里存在@的时候，就重新给用户名和域名赋值

            if (ix > -1) { //如果@符号存在，就表示用户已经输入用户名了。
                name = term.slice(0, ix);
                host = term.slice(ix + 1);
            }

            if (name) { //如果name有值 即：不为空
                //如果用户已经输入@和后面的全部或部分域名，那么就找到相关的域名提示，比如abc@1 就提示[email protected]
                //如果用户还没有输入@或后面的域名。那么就把所有的域名都提示出来

                var getHosts = []; //根据用户名填写的域名我们在hosts里面找到对应的域名集合

                if (host) { //并且host也有值的时候
                    getHosts = $.grep(hosts, function (val, key) { // 给getHosts赋值
                        if (val.indexOf(host) > -1) {
                            return val;
                        };
                    });
                }
                else {
                    getHosts = hosts;
                }
                

                var abc = $.map(getHosts, function (val) { //这个val就是getHosts里的每个域名元素。
                    return name + "@" + val;
                });

                
                result.push(term);//假如我只定义了qq.com，和163.com这两个邮箱列表，那么在用户输入其他的邮箱的时候我也有提示的功能，比如我在输入[email protected]的时候，我也有提示的功能。 这时候，我就需要将用户输入的数据添加到result这个邮箱域名集合当中

                result = result.concat(abc);//然后再将abc这个集合也加入到result当中 形成一个新的数组然后赋值给result      
                
            }

            //result.push(term); //或者这样也行，不过这样的话用term就在数组里面的位置就是最后一个了。提示的时候也就在最后一个了。我们一般想让它显示在第一个
            
            //result.unshift(term); //或者这样也行; unshift方法的作用是：将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

            response(result);

        }
    });
</script>

下面我们可以将上面的那段JS代码小心的优化一下

<html>
<head>
    <title></title>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <input id="email" type="text" />
</body>
</html>
<script type="text/javascript">
    $("#email").autocomplete({
        delay: 0, //默认为300 毫秒，延迟显示设置。
        autoFocus:true, //设置为true 时，第一个项目会自动被选定。
        source: function (request, response) {

            var hosts = ["qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//邮箱域名集合

            var term = request.term; //获取用户输入的内容；
            var name = term;  //邮箱的用户名
            var host = "";   //邮箱的域名 例如qq.com
            var ix = term.indexOf('@'); //@的位置

            var result = []; //最终呈现的邮箱列表
            

            //当用户输入的数据（email）里存在@的时候，就重新给用户名和域名赋值

            if (ix > -1) { //如果@符号存在，就表示用户已经输入用户名了。
                name = term.slice(0, ix);
                host = term.slice(ix + 1);
            }

            if (name) { //如果name有值 即：不为空

                var getHosts = []; //根据用户名填写的域名我们在hosts里面找到对应的域名集合
                
                getHosts=  host ? ($.grep(hosts, function (val) { return val.indexOf(host) > -1 })) : hosts;

                result = $.map(getHosts, function (val) { //这个val就是getHosts里的每个域名元素。
                    return name + "@" + val;
                });                
            }          
            result.unshift(term); // unshift方法的作用是：将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

            response(result);

        }
    });
</script>