邮箱自动完成（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

邮箱自动完成（jquary效果）的更多相关文章

JS输入框邮箱自动提示(带有demo和源码)（转载）
今天在javascriptQQ群里面有童鞋问到有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码都没有看到这样类似的插件,然后我想了下 "JS输 ...
JS输入框邮箱自动提示(带有demo和源码)
今天在javascriptQQ群里面有童鞋问到有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码都没有看到这样类似的插件,然后我想了下 "JS输 ...
【jquery】邮箱自动补全 + 上下翻动
最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML> <html lang=&qu ...
jquery+css实现邮箱自动补全
今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...
js邮箱自动补全
邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
[模仿微软Live.cn]JavaScript输入邮箱自动提示
原理是:在一个输入框中,当我输入任何字的时候自动下拉相应的邮箱提示,在输入框输入123的时候下拉框有所有123的邮箱输入其他的时候有其他文案对应的邮箱. 同理此插件不需要任何html标签, ...
setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

hdu1023
import java.math.BigInteger; import java.util.Scanner; public class Main { static BigInteger fac(Big ...
C++几个小函数
之前看书,遇到几个编程题,要实现一些库自带的函数.于是动手写了写,并且做了一些测试.今晚在测试的时候,还发现了一些其他内存分配的问题,顺路一起记下.这里只写了字符串转整型,字符串赋值函数. #incl ...
ubuntu 下安装 matplotlib
直接使用sudo easy_install matplotlib 报错 ================================================================ ...
SharePoint管理中心来配置资源限制（大名单）
SharePoint管理中心来配置资源限制(大名单) 名单SharePoint核心.SharePoint一切的一切都是列表. 我可以说SharePoint内容为驱动的列表. 之前版本号的SharePo ...
83. 从视图索引说Notes数据库（上）
索引是数据库系统重要的feature,不管是传统的关系型数据库还是时兴的NoSQL数据库,它攸关查询性能,因而在设计数据库时须要细加考量.然而,Lotus Notes隐藏技术底层.以用户界面为导向.追 ...
HTTP的REST服务简介
REST简介一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么, ...
c++的vector容器
c++还有一个很常用的容器就是vector容器,他是数组实现的,是一种可变长的容器,在很多的时候可以简化我们的编程.可学习的链接:http://www.cnblogs.com/mr-wid/archi ...
JS扩展或 Jquery的扩展写法
<script>//JS扩展String函数test,其它类推String.prototype.test = function(s){ alert(this+s);}var str = ' ...
linux旁边flv注射MetaData工具
1,yamdi 官方网站:http://yamdi.sourceforge.net/ 下载链接:http://sourceforge.net/projects/ya ...
【MySQL案件】mysql登录-S失败
1.1.1. mysql登录mysql时间,-S参数失效 [环境的叙述性说明] mysql5.5.14 [问题叙述性说明] 配置多个实例实例1 实例2 datadir /home/mysql_330 ...

邮箱自动完成（jquary效果）

邮箱自动完成（jquary效果）的更多相关文章

随机推荐

热门专题