邮箱联想提示

项目中遇到的需求。

用户在输入用户名时，若输入的是邮箱账号，那么为用户进行提示，以提高用户体验。

好，我们来看看这个需求，然后分解下思路。

1. 需要判断用户输入的用户名是否是邮箱账号（正则匹配）
2. 邮箱的类型可作为参数传入（因为不保证万年不变）
3. 匹配用户输入的邮箱号，进行过滤展示。

这里我的详细思路是这样的：

邮箱类型作为实参传入（数组类型），根据传入的数据，生成html结构。截取用户输入的数据，过滤，决定展示哪几条数据。这些大家都懂，下面就放出代码！

    function widgetlenovo() {
        this.op = {
            target: $('#loginName'),
            widgetObj: $('div.m-widget-lenovo'),
            arrMail: ['qq.com', 'sina.com', '163.com', '126.com', '139.com', 'sohu.com', 'foxmail.com', 'yahoo.com', 'gmail.com', 'opi-corp.com']
        }
        this.init = function (op) {
            this.op = $.extend(this.op, op || {});
            this.build();
        }
        this.build = function () {
            var self = this,
                wrap = document.createElement('ul'),
                li = document.createElement('li'),
                d = self.op;
            for (var i = 0, _len = d.arrMail.length; i < _len; i++) {
                var clone = li.cloneNode();
                clone.innerHTML = '<span></span><b>' + d.arrMail[i] + '</b>';
                wrap.appendChild(clone);
            }
            d.widgetObj[0].appendChild(wrap);
            var $wlis = d.widgetObj.find('li');
            var trigger = 'oninput' in document.createElement('input') ? 'input' : 'propertychange';
            d.target.on(trigger, function (e) {
                var $this = $(this), _val = $.trim($this.val());
                if (/@/.test(_val)) {
                    d.widgetObj.show();
                    var _f = _val.substr(_val.indexOf('@') + 1, _val.length);
                    if (_f !== '') {
                        var arrPos = self.filter(_f);
                        if (arrPos.length !== 0) {
                            $wlis.hide();
                            for (var i = 0, _len = arrPos.length; i < _len; i++) {
                                $wlis.eq(arrPos[i]).show();
                            }
                        } else {
                            d.widgetObj.hide();
                        }
                    } else {
                        $wlis.show();
                    }
                    $wlis.find('span').html(_val.replace(/@.+$/, '@'));
                } else {
                    d.widgetObj.hide();
                }
            });
            $wlis.on('click', function () {
                d.target.val($.trim($(this).text()));
                d.widgetObj.hide();
            });
        }
        this.filter = function (val) {
            var _result = [], arr = this.op.arrMail;
            for (var i = 0, _len = arr.length; i < _len; i++) {
                arr[i].substr(0, val.length).indexOf(val) !== -1 ? _result.push(i) : null;
            }
            return _result;
        }
    }

这是效果图，css我就不贴上来了。