jq邮箱自动补全提示

需要输入内容和@才会显示的邮箱补全提示，方便可以输入（手机号/用户名/邮箱）的input输入框

 

html

<div class="emails">
    <input type="text" class="email" placeholder="请输入手机号/用户名/邮箱"/>
    <ul class="autocomplete"></ul>
</div>

 

css

.emails{position:relative;}
.email{padding:0;width:300px;height:30px;text-align:center;border:1px solid #ccc;outline:none;}
.autocomplete{margin:0;padding:0;list-style:none;display:none;position:absolute;left:0;top:31px;text-align:center;border:1px solid #ccc;color:#666;width:300px;}
.autocomplete li{padding:8px 10px;cursor:pointer;}
.autocomplete .active{background: #f37ea2 !important;color:#fff;}
.autocomplete li:hover{background: #fdb3cb;color:#fff;}

 

js

$(function(){
    var reEmail = /^\w+@$/, sLi = '',vsName = '.autocomplete li:visible',email=$('.email'),autocomplete= $('.autocomplete');
    var aSuffix = ['qq.com', '163.com', '126.com', 'sina.com', 'aliyun.com', 'hotmail.com', 'sohu.com', 'gmail.com', 'sina.cn', 'yahoo.com'];
    $.each(aSuffix, function () {
        sLi += '<li></li>';
    });
    email.bind('input propertychange', function () {  // input监听事件
        var emailText = email.val(), newText = '';
        var prefix = emailText.substring(0, emailText.indexOf('@') + 1);//prefix（前缀）= 截取@以及之前的文本
        autocomplete.html(sLi);
        $('.autocomplete li').each(function (i, item) {
            if (reEmail.test(prefix)) { // 如果正则匹配成功prefix，则prefix（@以及之前的文本）+ aSuffix（后缀）
                autocomplete.show();
                $(item).html(prefix + aSuffix[i]);
            }
            if ($(item).html().indexOf(emailText) != -1) { //筛选成功的补全提示显示否则隐藏
                $(item).show();
            } else {
                $(item).hide();
            }
        }).mousedown(function () { // 鼠标按下选取邮箱
            email.val($(this).html());
            autocomplete.hide();
        });
        if (emailText.indexOf('@') <= 0 || $(vsName).length == 0) { // 没有输入@和输入的第一个是@，或全部匹配失败，则隐藏邮箱的补全提示
            autocomplete.hide();
        }
        $(vsName).first().addClass('active').siblings().removeClass('active');
    });
    email.keydown(function (e) {
        if (e.keyCode == 13&&autocomplete.is(':visible')) {  // 回车Enter 选取邮箱
            email.val($('.autocomplete li').filter('.active').text());
            autocomplete.hide();
            e.preventDefault();  // 为了阻止回车Enter默认提交表单
        }
        if (e.keyCode == 38) { // 向上↑
            if ($(vsName).first().is('.active')) {
                $(vsName).last().addClass('active').siblings().removeClass('active');
            } else {
                $(vsName).filter('.active').prevAll(':visible:first').addClass('active').siblings().removeClass('active');
            }
        }
        if (e.keyCode == 40) { // 向下↓
            if ($(vsName).last().is('.active')) {
                $(vsName).first().addClass('active').siblings().removeClass('active');
            } else {
                $(vsName).filter('.active').nextAll(':visible:first').addClass('active').siblings().removeClass('active');
            }
        }
    });
});

 

如果需要input离开焦点后隐藏邮箱补全提示，获得焦点再显示则用以下js

$(function(){
    var reEmail = /^\w+@$/, sLi = '',vsName = '.autocomplete li:visible',email=$('.email'),autocomplete= $('.autocomplete');
    var aSuffix = ['qq.com', '163.com', '126.com', 'sina.com', 'aliyun.com', 'hotmail.com', 'sohu.com', 'gmail.com', 'sina.cn', 'yahoo.com'];
    $.each(aSuffix, function () {
        sLi += '<li></li>';
    });
    email.bind('input propertychange', function () {  // input监听事件
        var emailText = email.val(), newText = '';
        var prefix = emailText.substring(0, emailText.indexOf('@') + 1);//prefix（前缀）= 截取@以及之前的文本
        autocomplete.html(sLi);
        $('.autocomplete li').each(function (i, item) {
            emailFilter(emailText);
            function emailFilter(text) {
                if (reEmail.test(prefix)) { // 如果正则匹配成功prefix，则prefix（@以及之前的文本）+ aSuffix（后缀）
                    autocomplete.show();
                    $(item).html(prefix + aSuffix[i]);
                }
                if ($(item).html().indexOf(text) != -1) { //筛选成功的补全提示显示否则隐藏
                    $(item).show();
                } else {
                    $(item).hide();
                }
            }

            email.focus(function () { //input获得焦点时，newText有输入@ 与 第一个不是@，并且匹配成功，则显示邮箱的补全提示
                if (newText.indexOf('@') > 0) {
                    emailFilter(newText);
                }
                if (newText == $(vsName).text() || $(vsName).length == 0) { //文本框内容和补全提示相等或全部匹配失败，则隐藏补全提示
                    autocomplete.hide();
                }
            }).blur(function () {  // input 离开焦点时，给newText赋值离开焦点时的文本内容，然后隐藏邮箱的补全提示。
                newText = email.val();
                autocomplete.hide();
            });

        }).mousedown(function () { // 鼠标按下选取邮箱
            email.val($(this).html());
        });
        if (emailText.indexOf('@') <= 0 || $(vsName).length == 0) { // 没有输入@和输入的第一个是@，或全部匹配失败，则隐藏邮箱的补全提示
            autocomplete.hide();
        }
        $(vsName).first().addClass('active').siblings().removeClass('active');
    });
    email.keydown(function (e) {
        if (e.keyCode == 13&&autocomplete.is(':visible')) {  // Enter 选取邮箱
            email.val($('.autocomplete li').filter('.active').text());
            autocomplete.hide();
            e.preventDefault();  // 为了阻止Enter默认提交表单
        }
        if (e.keyCode == 38) { // 向上↑
            if ($(vsName).first().is('.active')) {
                $(vsName).last().addClass('active').siblings().removeClass('active');
            } else {
                $(vsName).filter('.active').prevAll(':visible:first').addClass('active').siblings().removeClass('active');
            }
        }
        if (e.keyCode == 40) { // 向下↓
            if ($(vsName).last().is('.active')) {
                $(vsName).first().addClass('active').siblings().removeClass('active');
            } else {
                $(vsName).filter('.active').nextAll(':visible:first').addClass('active').siblings().removeClass('active');
            }
        }
    });
});

 

 

如需转载，请注明出处 https://my.oschina.net/u/3545669/blog/1377346

                

                                                         

                                                                                                            世界以痛吻我,要我回报以歌。

                                                                                                            加油~我一定可以的！

 

转载于:https://my.oschina.net/u/3545669/blog/1377346