邮箱自动完成(jquary效果)

   邮箱自动完成的效果在网站上大多都看过,但是质量参差不齐,今天突然在网上看到一篇博客,感觉这个插件很好,就想来写一下分享给大家!

   效果图如下!

完整demo代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>邮箱地址自动完成功能</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style>
.demo p {width:1000px; margin-left:auto; margin-right:auto;}
.input{padding:12px; width:300px; border:1px solid #c2c2c2; border-radius:4px; box-shadow:0 0 1px #fff, inset 0 0 2px rgba(0,0,0,.15); background-color:#F2F2F2; font-size:14px;}
.emailist{border:1px solid #bdbdbd; border-radius: 4px; background-color:#fff; color:#666; font-size:14px; list-style-type:0; padding:0; margin:0; overflow:hidden;}
.emailist li{padding:2px 11px; cursor:pointer;}
.emailist .on, .emailist li:hover{background-color:#eee;}
</style>
</head>
<body>
 <div class="demo">
    <p><input type="email" class="input inputMailList" name="email" placeholder="请输入邮箱" required autofocus autocomplete="off"></p>             
 </div>
</body>
</html>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery.mailAutoComplete-4.0.js"></script>
<script type="text/javascript">
$(".inputMailList").mailAutoComplete();//使用方法
</script>

js实现效果代码(jquery.mailAutoComplete-4.0.js)如下:

(function($) {
    $.fn.mailAutoComplete = function(options) {
        var defaults = {
            className: "emailist",
            email:     ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
            zIndex: 11    
        };
        // 最终参数
        var params = $.extend({}, defaults, options || {});
        
        // 是否现代浏览器
        var isModern = typeof window.screenX === "number", visibility = "visibility";
        // 键值与关键字
        var key = {
            "up": 38,
            "down": 40,
            "enter": 13,
            "esc": 27,
            "tab": 9    
        };
        // 组装HTML的方法
        var fnEmailList = function(input) {
            var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = [];
            $.each(params.email, function(index, email) {
                if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) {            
                    arrEmailNew.push(email);                        
                }
            });    
            $.each(arrEmailNew, function(index, email) {
                htmlEmailList = htmlEmailList + '<li'+ (input.indexSelected===index? ' class="on"':'') +'>'+ arrValue[0] + "@" + email +'</li>';    
            });        
            return htmlEmailList;            
        };
        // 显示还是隐藏
        var fnEmailVisible = function(ul, isIndexChange) {
            var value = $.trim(this.value), htmlList = '';
            if (value === "" || (htmlList = fnEmailList(this)) === "") {
                ul.css(visibility, "hidden");    
            } else {
                isIndexChange && (this.indexSelected = -1);
                ul.css(visibility, "visible").html(htmlList);
            }
        };
        
        return $(this).each(function() {
            this.indexSelected = -1;
            // 列表容器创建
            var element = this;
            var eleUl = $('<ul></ul>').css({
                position: "absolute",
                marginTop: element.offsetHeight,
                minWidth: element.offsetWidth - 2,
                visibility: "hidden",
                zIndex: params.zIndex
            }).addClass(params.className).bind("click", function(e) {
                var target = e && e.target;
                if (target && target.tagName.toLowerCase() === "li") {
                    $(element).val(target.innerHTML).trigger("input");
                    $(this).css(visibility, "hidden");
                    element.focus(); // add on 2013-11-20
                }                
            });            
            $(this).before(eleUl);
            // IE6的宽度
            if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); }    
            
            // 不同浏览器的不同事件
            isModern? $(this).bind("input", function() {
                fnEmailVisible.call(this, eleUl, true);
            }): element.attachEvent("onpropertychange", function(e) {                
                if (e.propertyName !== "value") return;
                fnEmailVisible.call(element, eleUl, true);        
            });
            
            $(document).bind({
                "click": function(e) {
                    var target = e && e.target, htmlList = '';
                    if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) {
                        eleUl.css(visibility, "visible").html(htmlList);    
                    } else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) {
                        eleUl.css(visibility, "hidden");
                    }
                },
                "keydown": function(e) {
                    var eleLi = eleUl.find("li");
                    if (eleUl.css(visibility) === "visible") {
                        switch (e.keyCode) {
                            case key.up: {
                                element.indexSelected--;
                                if (element.indexSelected < 0) {
                                    element.indexSelected = -1 + eleLi.length;    
                                }
                                e.preventDefault && e.preventDefault();
                                break;
                            }
                            case key.down: {
                                element.indexSelected++;
                                if (element.indexSelected >= eleLi.length) {
                                    element.indexSelected = 0;    
                                }
                                e.preventDefault && e.preventDefault();
                                break;
                            }
                            case key.enter: {        
                                e.preventDefault();        
                                eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html());
                                eleUl.css("visibility", "hidden");
                                break;
                            }
                            case key.tab: case key.esc: {
                                eleUl.css("visibility", "hidden");
                                break;
                            }
                        }
                        if (element.indexSelected !== -1) {
                            eleUl.html(fnEmailList(element));
                        }
                    }
                }
            });        
        });
    };
})(jQuery);

个人觉得这个插件比较好用,而且代码很精简!

原文地址:http://www.zhangxinxu.com/wordpress/?p=866

posted @ 2014-08-27 10:13  史洲宇  阅读(385)  评论(0编辑  收藏  举报