/** * 邮箱自动补全 * @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(); }); };