Gearbest autocomplete

$.fn.emailSelector = function (emailType) {
                    var $input = this;
                    var input = $input[0];
                    var $parent = $input.parent();
                    var $ul = $('<ul></ul>');
                    var _emailType;
                    var index = 0;


                    if (input.nodeName.toUpperCase() !== 'INPUT') {
                        throw new Error('必须绑定在input标签上')
                    }

                    if ($parent.css('position') !== 'relative') {
                        throw new Error('input的父元素必须是相对定位');
                    }

                    if (!emailType || !$.isArray(emailType) || emailType.length === 0) {
                        emailType = [
                            '',
                            '@gmail.com',
                            '@hotmail.com',
                            '@yahoo.com',
                            '@mail.ru',
                            '@outlook.com',
                            '@icloud.com',
                            '@aol.com',
                            '@hotmail.co.uk',
                            '@msn.com',
                            '@hotmail.fr',
                            '@live.com',
                            '@hostcalls.com',
                            '@web.de',
                            '@gmx.de',
                            '@googlemail.com'
                        ];
                    } else {
                        emailType.unshift('');
                    }


                    $input.attr('autocomplete','off');
                    $ul.addClass('emailSelector');
                    $parent.append($ul);


                    $(document).on('mouseup', function () {
                        $ul.hide();
                    });
                    $ul.on('mouseover', 'li', function (e) {
                        var target = e.target;
                        index = $(target).attr('data-index') - 0;
                        setActive();
                    });
                    $ul.on('click', 'li', function (e) {
                        $('[for="email"]').remove();
                        $('#email').removeClass('error');
                        $input.val(e.target.innerHTML);
                        $ul.hide();
                    });
                    $input.on('keyup', function (e) {
                        //up
                        if (e.keyCode == 38) {
                            if (index <= 0) {
                                index = _emailType.length - 1;
                            } else {
                                index--;
                            }
                            setActive();
                            if ($('.emailSelector').scrollTop()>0){
                                $('.emailSelector').scrollTop($('.emailSelector').scrollTop()-35);
                            };
                        }
                        //down
                        else if (e.keyCode == 40) {
                            if (index >= _emailType.length - 1) {
                                index = 0;
                                $('.emailSelector').scrollTop(0);
                            } else {
                                index++;
                            }
                            setActive();
                            if (index>3&&index<$('.emailSelector li').length){
                                $('.emailSelector').scrollTop($('.emailSelector').scrollTop()+35);
                            };
                        }
                        //enter
                        else if (e.keyCode == 13) {
                            $input.val($ul.find('li').eq(getIndex()).text());
                            $ul.hide();
                            $('#email').blur();
                        }

                        else {
                            $ul.show();
                            var text = $input.val().trim();
                            if (text.length > 0 && text.indexOf('@') == -1) {
                                _emailType = emailType;
                                init(text);
                            } else if (text.length > 0 && text.indexOf('@') > 0) {
                                var i = text.indexOf('@');
                                var type = text.substr(i);
                                _emailType = emailType.filter(function (t) {
                                    if (t.indexOf(type) != -1) return true;
                                });
                                init(text, type);
                            } else {
                                $ul.hide();
                            }
                        }
                        if ($('ul li').length==0){
                            $('.emailSelector').css('border-bottom','none');
                        }else {
                            $('.emailSelector').css('border-bottom','1px solid #ff8a00');
                            if ($('.emailSelector').css('display')!='none'){
                                $('#email').css('border-bottom-right-radius','0px');
                                $('#email').css('border-bottom-left-radius','0px');
                            };
                        };
                    });


                    function init(text, replace) {
                        $ul.html('');
                        index = 0;
                        if (replace !== undefined) {
                            text = text.replace(replace, '');
                        }
                        $.each(_emailType, function (i, type) {
                            type = type.toString().trim();
                            var $li = $('<li>' + text + type + '</li>');
                            $li.attr('data-index', i);
                            if (i == index) {
                                $li.addClass('active');
                            }
                            $ul.append($li);
                        });
                    }


                    function setActive() {
                        $ul.find('li').removeClass('active');
                        $ul.find('li').eq(getIndex()).addClass('active');
                    }


                    function getIndex() {
                        if (index < 0) {
                            return 0;
                        } else if (index >= _emailType.length) {
                            return _emailType.length - 1;
                        } else {
                            return index;
                        }
                    }
                }
            })(jQuery);
            $('[name=email]').emailSelector();