ac-email.js 2.5 KB
/**
 * 邮箱自动补全
 * @author:xuqi<qi.xu@yoho.cn>
 * @date: 2016/2/22
 */
var $ = require('yoho-jquery');

var mailPostfix = {
    num: ['qq.com', '163.com', '126.com', 'sina.com', 'gmail.com', 'sohu.com', 'hotmail.com', '139.com', '189.com'],
    other: ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com', 'sohu.com', 'hotmail.com', '139.com', '189.com']
};

var emailAcTime;

/**
 * @param $input 需要自动完成的$对象
 * @param cb 鼠标移开/点击自动完成项后需要执行的操作(验证等)
 */
module.exports = function($input, cb) {
    var ulHtml = '<ul id="email-autocomplete" class="email-autocomplete hide"></ul>';

    var $emailAutoComplete;

    $input.parent().append(ulHtml);

    $emailAutoComplete = $('#email-autocomplete');

    $input.on('keyup', function() {
        var account = $.trim($(this).val()),
            html = '',
            accountMatch,
            matchStr,
            postfix,
            i;

        // 输入@时自动补全邮箱后缀
        // 此处>0非错误,用于避免输入的第一个字符为@被识别为邮箱
        if (account.indexOf('@') > 0) {
            accountMatch = account.match(/^[0-9]+@(.*)/);
            if (accountMatch) {

                // 数字邮箱补全
                postfix = mailPostfix.num;
                matchStr = accountMatch[1];
            } else {
                postfix = mailPostfix.other;
                matchStr = account.match(/@(.*)/)[1];
            }

            for (i = 0; i < postfix.length; i++) {
                if (postfix[i].indexOf(matchStr) > -1) {
                    html += '<li>' + account.slice(0, account.indexOf('@')) + '@' + postfix[i] + '</li>';
                }
            }

            if (html !== '' && /.com$/.test(account) === false) {
                $emailAutoComplete.html(html).removeClass('hide');
            } else {

                // 隐藏autocomplete
                $emailAutoComplete.html('').addClass('hide');
            }
        }
    }).on('blur', function() {
        emailAcTime = setTimeout(function() {

            // 未点击自动完成项
            $emailAutoComplete.addClass('hide');

            cb && cb();
        }, 200);
    });

    // 邮箱自动完成列表项点击
    $emailAutoComplete.on('click', 'li', function() {
        clearTimeout(emailAcTime); // 清空默认关闭

        // 点击自动完成项后进行验证
        $input.val($(this).text()).focus();

        $emailAutoComplete.addClass('hide');

        cb && cb();
    });
};