JRHfjMY2

1$.fn.emailSelector = function (emailType) {
2                    var $input = this;
3                    var input = $input[0];
4                    var $parent = $input.parent();
5                    var $ul = $('<ul></ul>');
6                    var _emailType;
7                    var index = 0;
8
9
10                    if (input.nodeName.toUpperCase() !== 'INPUT') {
11                        throw new Error('必须绑定在input标签上')
12                    }
13
14                    if ($parent.css('position') !== 'relative') {
15                        throw new Error('input的父元素必须是相对定位');
16                    }
17
18                    if (!emailType || !$.isArray(emailType) || emailType.length === 0) {
19                        emailType = [
20                            '',
21                            '@gmail.com',
22                            '@hotmail.com',
23                            '@yahoo.com',
24                            '@mail.ru',
25                            '@outlook.com',
26                            '@icloud.com',
27                            '@aol.com',
28                            '@hotmail.co.uk',
29                            '@msn.com',
30                            '@hotmail.fr',
31                            '@live.com',
32                            '@hostcalls.com',
33                            '@web.de',
34                            '@gmx.de',
35                            '@googlemail.com'
36                        ];
37                    } else {
38                        emailType.unshift('');
39                    }
40
41
42                    $input.attr('autocomplete','off');
43                    $ul.addClass('emailSelector');
44                    $parent.append($ul);
45
46
47                    $(document).on('mouseup', function () {
48                        $ul.hide();
49                    });
50                    $ul.on('mouseover', 'li', function (e) {
51                        var target = e.target;
52                        index = $(target).attr('data-index') - 0;
53                        setActive();
54                    });
55                    $ul.on('click', 'li', function (e) {
56                        $('[for="email"]').remove();
57                        $('#email').removeClass('error');
58                        $input.val(e.target.innerHTML);
59                        $ul.hide();
60                    });
61                    $input.on('keyup', function (e) {
62                        //up
63                        if (e.keyCode == 38) {
64                            if (index <= 0) {
65                                index = _emailType.length - 1;
66                            } else {
67                                index--;
68                            }
69                            setActive();
70                            if ($('.emailSelector').scrollTop()>0){
71                                $('.emailSelector').scrollTop($('.emailSelector').scrollTop()-35);
72                            };
73                        }
74                        //down
75                        else if (e.keyCode == 40) {
76                            if (index >= _emailType.length - 1) {
77                                index = 0;
78                                $('.emailSelector').scrollTop(0);
79                            } else {
80                                index++;
81                            }
82                            setActive();
83                            if (index>3&&index<$('.emailSelector li').length){
84                                $('.emailSelector').scrollTop($('.emailSelector').scrollTop()+35);
85                            };
86                        }
87                        //enter
88                        else if (e.keyCode == 13) {
89                            $input.val($ul.find('li').eq(getIndex()).text());
90                            $ul.hide();
91                            $('#email').blur();
92                        }
93
94                        else {
95                            $ul.show();
96                            var text = $input.val().trim();
97                            if (text.length > 0 && text.indexOf('@') == -1) {
98                                _emailType = emailType;
99                                init(text);
100                            } else if (text.length > 0 && text.indexOf('@') > 0) {
101                                var i = text.indexOf('@');
102                                var type = text.substr(i);
103                                _emailType = emailType.filter(function (t) {
104                                    if (t.indexOf(type) != -1) return true;
105                                });
106                                init(text, type);
107                            } else {
108                                $ul.hide();
109                            }
110                        }
111                        if ($('ul li').length==0){
112                            $('.emailSelector').css('border-bottom','none');
113                        }else {
114                            $('.emailSelector').css('border-bottom','1px solid #ff8a00');
115                            if ($('.emailSelector').css('display')!='none'){
116                                $('#email').css('border-bottom-right-radius','0px');
117                                $('#email').css('border-bottom-left-radius','0px');
118                            };
119                        };
120                    });
121
122
123                    function init(text, replace) {
124                        $ul.html('');
125                        index = 0;
126                        if (replace !== undefined) {
127                            text = text.replace(replace, '');
128                        }
129                        $.each(_emailType, function (i, type) {
130                            type = type.toString().trim();
131                            var $li = $('<li>' + text + type + '</li>');
132                            $li.attr('data-index', i);
133                            if (i == index) {
134                                $li.addClass('active');
135                            }
136                            $ul.append($li);
137                        });
138                    }
139
140
141                    function setActive() {
142                        $ul.find('li').removeClass('active');
143                        $ul.find('li').eq(getIndex()).addClass('active');
144                    }
145
146
147                    function getIndex() {
148                        if (index < 0) {
149                            return 0;
150                        } else if (index >= _emailType.length) {
151                            return _emailType.length - 1;
152                        } else {
153                            return index;
154                        }
155                    }
156                }
157            })(jQuery);
158            $('[name=email]').emailSelector();