jquery实现邮箱自动补全功能示例分享


Posted in Javascript onFebruary 17, 2014
(function($){
    $.fn.autoMail = function(options){ 
        var autoMail = $(this); 
        var _value   = ''; 
        var _index   = -1; 
        var _width   = autoMail.outerWidth(); 
        var _height  = autoMail.outerHeight(); 
        var _left    = autoMail.offset().left; 
        var _top     = autoMail.offset().top; 
        autoMail.defaults = { 
            deValue : '请输入邮箱地址', 
            textCls : 'text-gray', 
            listCls : 'list-mail', 
            listTop : 1, 
            mailArr  : ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"] 
        } 
        //初始化 
        autoMail.init = function(){ 
            autoMail.vars = $.extend({},autoMail.defaults,options); 
            autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls); 
            autoMail.click(function(event){ 
                autoMail.select().removeClass(autoMail.vars.textCls); 
                if(autoMail.val() != autoMail.vars.deValue){ 
                    autoMail.add(); 
                    autoMail.order(_value); 
                    autoMail.list.find('.item').each(function(){ 
                        if($(this).text() == autoMail.val()){ 
                            $(this).siblings('.item').removeClass('select'); 
                            $(this).addClass('select'); 
                            return false; 
                        } 
                    }) 
                } 
                event.stopPropagation(); 
            }) 
            autoMail.blur(function(event){ 
                if(autoMail.val() == '' || autoMail.val() == autoMail.vars.deValue){ 
                    alert(autoMail.val()) 
                    autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls); 
                } 
            }) 
            //文本域键盘松开事件 
            autoMail.keyup(function(event){ 
                if($(autoMail.list).length == 0){ 
                    autoMail.add(); 
                } 
                if(autoMail.list.length > 0){ 
                    var keyCode = event.keyCode; 
                    //alert(keyCode) 
                    switch(keyCode){ 
                        case 13: 
                            autoMail.remove(); 
                            autoMail.blur(); 
                            break; 
                        case 38: 
                            _index--; 
                            if(_index < 0){ 
                                _index = 0; 
                            } 
                            autoMail.keyOperate(_index); 
                            break; 
                        case 40: 
                            _index++; 
                            if(_index > $('.item',autoMail.list).length - 1){ 
                                _index = ('.item',autoMail.list).length - 1 
                            } 
                            autoMail.keyOperate(_index); 
                            break; 
                        default: 
                            if(autoMail.val().indexOf('@') < 0){ 
                                _value = autoMail.val(); 
                                autoMail.order(_value);      
                            }     
                    }   
                } 
            }) 
            $(document).click(function(){ 
                if($(autoMail.list).length > 0){ 
                    autoMail.remove(); 
                    autoMail.blur(); 
                } 
            }) 
        } 
        //创建列表 
        autoMail.create = function(){ 
            var li = ''; 
            for(var i = 0; i < autoMail.vars.mailArr.length; i++){ 
                li += '<li class="item">'+ '<span class="style">' + '@' + autoMail.vars.mailArr[i] + '</span>' + '</li>'; 
            } 
            autoMail.list = $('<div class="'+ autoMail.vars.listCls +'"><ul>'+ li +'</ul></div>'); 
            autoMail.list.css({ 
                'position' : 'absolute', 
                'left'     : _left, 
                'top'      : _top + _height + autoMail.vars.listTop, 
                'min-width': _width 
            }) 
            autoMail.list.appendTo($('body')); 
            //邮箱列表绑定事件 
            autoMail.list.find('.item').click(function(event){ 
                autoMail.getVal($(this)); 
                autoMail.remove(); 
                event.stopPropagation(); 
            }) 
            autoMail.list.find('.item').hover( 
                function(){ $(this).addClass('hover'); }, 
                function(){ $(this).removeClass('hover'); } 
            ) 
            return autoMail.list; 
        } 
        //序列化列表 
        autoMail.order = function(_value){ 
            $('.name',autoMail.list).remove(); 
            var name = $('<span class="name">'+ _value +'</span>'); 
            $('.item',autoMail.list).prepend(name); 
        } 
        //添加列表 
        autoMail.add = function(){ 
            if(typeof autoMail.list == 'undefined' || autoMail.list.length < 1) autoMail.create(); 
        } 
        //移除列表 
        autoMail.remove = function(){ 
            if(autoMail.list.length > 0){ 
                autoMail.list.remove(); 
                delete autoMail.list; 
            } 
        } 
        //获取值 
        autoMail.getVal = function(obj){ 
            if($('.name',obj).text() != ''){ 
                var selectValue = obj.text(); 
                autoMail.val(selectValue);   
            }else{ 
                return false; 
            } 
        } 
        //键盘操作 
        autoMail.keyOperate = function(_index){ 
            $('.item',autoMail.list).eq(_index).addClass('hover').siblings('.item').removeClass('hover'); 
            autoMail.val($('.item',autoMail.list).eq(_index).text()); 
        } 
        //开始初始话动作... 
        autoMail.init(); 
    } 
})(jQuery)
<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="./jquery.js"></script>
        <script type="text/javascript" src="./autoMail.js"></script>
        <script type="text/javascript">
        $(function(){
            $('.automail').autoMail();
        })  
        </script>
        <style type="text/css">
        *{padding: 0; margin: 0;}
        body{font-family: "微软雅黑"; color: #333; font-size: 12px;}
        ul{list-style: none;}
        input{ width: 180px; height: 16px; line-height: 16px; margin: 100px; padding: 4px; border: 1px solid #aaa; font-size: 12px; font-family: "微软雅黑"; }
        .list-mail ul{ border: 1px solid #aaa; line-heihgt: 24px; padding: 6px; }
        .list-mail li{ cursor: pointer; padding: 2px 3px; margin-bottom: 2px; }
        .list-mail .name{ color: #982114; }
        .list-mail .hover{ background: #fefacf; }
        .list-mail .select{ background: #dedaae; }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <input type="text" class="automail" />
    </body>
</html>
Javascript 相关文章推荐
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
Django使用多数据库的方法
Sep 06 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
JQuery与JS里submit()的区别示例介绍
Feb 17 #Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 #Javascript
清除div下面的所有标签的方法
Feb 17 #Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 #Javascript
js打开新窗口方法整理
Feb 17 #Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 #Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 #Javascript
You might like
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python实现dijkstra最短路由算法
2019/01/17 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
手工社团活动方案
2014/02/17 职场文书
统计岗位职责
2014/02/21 职场文书
教师学期个人总结
2015/02/11 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python