基于jQuery的email suggest插件

最近项目中有表单提交的地方需要用户填写邮箱，PM(产品经理)和运营都强烈要求在用户填写邮箱的时候出现suggest列表，简化用户输入的填写流程。我考虑了下，这个应该也是经常会用到的功能，细心的朋友可能会发现好多登录或者其他有表单提交的地方，比如搜狐白社会登录，我的搜狐登录等等都有这个功能，所以为了方便以后使用，索性写一个jQuery插件出来好了。

这里不对具体代码做详解，只讲述实现思路和流程。首先有一份默认配置defaults

 // 默认参数配置
         defaults = {
             sugClass: 'ema-sug',
             domains: [
                 'sohu.com',
                 '163.com',
                 '126.com',
                 '139.com',
                 'sina.com',
                 'qq.com',
                 'gmail.com'
             ]
         }

sugClass是用户为suggest添加样式和作为插件内容js钩子使用的，domains是suggest列表内容，如果用户使用插件时候没有传递参数就会使用默认配置

插件内部有一个EmailSug构造函数，每次调用插件时候都会新创建一个EmailSug的实例，每个实例有自己的属性和配置

 function EmailSug(elem, options) {
         this.$field = $(elem);
         this.options = $.extend(true, {}, defaults, options);
         this._defaults = defaults;
         this._domains = this.options.domains;
         // 当前选中元素下标
         this.selectedIndex = 0;

         this.init();
     }

当创建实例时候会执行初始化函数，初始化函数调用了事件绑定方法

init: function() {
    this.addEvent();
}

事件绑定方法对input元素进行了keyup blur事件的绑定，分别在用户输入内容时候进行suggest更新和blur时候关闭suggest提示

 addEvent: function() {
             var
                 // 当前上下文
                 that = this,

                 //
                 value;

             this.$field.on('keyup.ema', function(e) {
                 value = $.trim(this.value);

                 if (value) {
                     that.create(this, value);

                     that.doSelect(e.keyCode);
                 } else {
                     that.hide();
                 }
             }).on('blur.ema', function() {
                 setTimeout(function() {
                     that.hide();
                 }, 200);
             });
         }

blur事件处理必须要使用setTimeout处理下，因为在用户通过鼠标点击suggest的某一个元素时候会触发input的blur事件，如果不做setTimeout处理会点击不到要选择的元素

 create: function(elem, value) {
             var
                 //
                 that = this,

                 arr,

                 len,

                 //
                 fragment,

                 //
                 ul = [],

                 //
                 offset,

                 left,

                 top,

                 width,

                 height,

                 style,

                 // 左右边框
                 borderWidth = 2;

             elem = $(elem);
             offset = elem.offset();

             width = elem.outerWidth(true) - borderWidth;
             height = elem.outerHeight(true);
             left = offset.left;
             top = offset.top + height;
             style = 'left: ' + left + 'px; top: ' + top + 'px; width: ' + width + 'px; border: 1px solid #e2e2e2; border-top: 0; display: none';

             //
             fragment = $('<div class="' + this.options.sugClass + '-wrapper" style="' + style + '" />');
             ul.push('<ul class="' + this.options.sugClass + '-list">');

             arr = this.filter(value, this._domains);
             len = arr.length;
             $.each(arr, function(i, domain) {
                 var
                     //
                     _class = that.options.sugClass + '-item';

                 if (that.selectedIndex > len - 1) {
                     if (i === 0) {
                         _class += ' active';

                         that.selectedIndex = 0;
                     }
                 } else {
                     if (i === that.selectedIndex) {
                         _class += ' active';
                     }
                 } 

                 ul.push('<li class="' + _class + '" data-index="' + i + '">' + value.replace(/@.*/, '') + '@' + domain  + '</li>');
             });

             ul.push('</ul>');
             ul = ul.join('');

             if (this.$suggest) {
                 this.$suggest.empty();
                 this.$suggest.append(ul);
             } else {
                 fragment.append(ul);

                 // 显示到页面
                 $('body').append(fragment);
                 this.$suggest = fragment;

                 ///
                 this.$suggest.on('mouseenter click', '.' + this.options.sugClass + '-item', function(e) {
                     var lis,

                         li;

                     li = $(this);
                     lis = li.parent().children();

                     if (e.type === 'mouseenter') {
                         li.addClass('active').siblings().removeClass('active');   

                         that.selectedIndex = $.inArray(this, lis);
                     } else {
                         // 当前选中
                         that.$field.val(lis.eq(that.selectedIndex).text());

                         // 隐藏email sug
                         that.hide();
                     }
                 });
             }

             //
             this.show();
         }

create方法调用了filter方法根据用户输入的内容对配置参数domains进行过滤筛选，返回跟用户输入匹配的数组，然后创建suggest列表并选中某一个元素，根据input元素的位置对suggest进行定位，最后渲染到页面并显示。每个实例只会创建一个suggest元素，每次根据用户输入的内容更新列表

 //
         filter: function(value, arr) {
             var
                 //
                 start,

                 suffix,

                 r = [];

             start = value.indexOf('@');
             if (start > -1) {
                 suffix = value.substring(start + 1);

                 $.each(arr, function(i, str) {
                     if (str.indexOf(suffix) > -1) {
                         r.push(str);
                     }
                 });
             } else {
                 r = arr;
             }

             return r;
         }

filter方法，实现逻辑很好理解

 doSelect: function(keyCode) {
             var
                 //
                 elems = $('.' + this.options.sugClass + '-item', this.$suggest),

                 //
                 min = 0,

                 //
                 max = elems.length - 1; 

             switch (keyCode) {
                 case 13:
                     // 回车选中当前已选项
                     $('li.active', this.$suggest).trigger('click');

                     // 下标重置
                     this.selectedIndex = 0;

                     break;
                     // 向上
                 case 38:
                     this.selectedIndex --;

                     if (this.selectedIndex < min) {
                         this.selectedIndex = max;
                     } 

                     elems.removeClass('active').eq(this.selectedIndex).addClass('active');
                     break;
                     // 向下
                 case 40:
                     this.selectedIndex ++;

                     if (this.selectedIndex > max) {
                         this.selectedIndex = min;
                     }

                     elems.removeClass('active').eq(this.selectedIndex).addClass('active');
                     break;
                 default:
                     break;
             }
         }

doSelect方法用户处理用户的键盘操作，Up Down Enter Esc这些按键处理

 show: function() {
             if (this.$suggest) {
                 this.$suggest.show();
             }
         }

 hide: function() {
             if (this.$suggest) {
                 this.$suggest.hide();
             }
         }

show和hide方法就是简单的最suggest进行显示和隐藏操作

实现很简单吧，源码不超过300行。可能实现有不合理或者不完善的地方欢迎指正~

最后附上demo地址和源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery插件email suggest - demo</title>
<link href="https://files.cnblogs.com/files/typeof/base.css" rel=stylesheet type=text/css >
<style type="text/css">
.page {
padding: 20px 10px;
}

.page .email {
width: 350px;
height: 30px;
line-height: 30px;
border: 1px solid #e2e2e2;
padding-left: 10px;
font-size: 14px;
}

.ema-sug-wrapper {
position: absolute;
background: #fff;
text-align: left;
}

.ema-sug-wrapper .ema-sug-list .ema-sug-item {
font-size: 14px;
height: 25px;
line-height: 25px;
padding-left: 10px;
color: #333;
}

.ema-sug-wrapper .ema-sug-list .ema-sug-item.active {
background: #ff4800;
cursor: pointer;
color: #fff;
}

</style>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="https://files.cnblogs.com/files/typeof/email-sug.js"> </script>
</head>
<body>
<div class="page">
<input type="text" class="email" />
</div>
<script>
$('.email').emailSug({
sugClass: 'ema-sug',
domains: [
'sohu.com',
'sogou.com',
'163.com',
'126.com',
'139.com',
'sina.com',
'qq.com',
'gmail.com'
]
});
</script>
</body>
</html>