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

代码如下:

(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>

(0)

相关推荐

  • jquery 实现输入邮箱时自动补全下拉提示功能

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能. 实现效果如图所示: 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "

  • 使用jquery实现仿百度自动补全特效

    新建index.html文件,直接复制下面代码到新建的文件index.html里面,用浏览器访问,仅用于参考: <!doctype html> <html> <meta charset="utf-8"> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .auto_hidden { width:204px;b

  • jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】

    本文实例讲述了jQuery实现输入框邮箱内容自动补全与上下翻动显示效果.分享给大家供大家参考,具体如下: 最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>邮箱自动补全</title>

  • jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码 代码如下: using System.Coll

  • jquery实现翻动fadeIn显示的方法

    本文实例讲述了jquery实现翻动fadeIn显示的方法.分享给大家供大家参考.具体实现方法如下: $(function() { //翻动显示 $("#zuixin div:not(:first)").css("display","none"); var B=$("#zuixin div:last"); var C=$("#zuixin div:first"); setInterval(function()

  • jQuery仿Flash上下翻动的中英文导航菜单实例

    本文实例讲述了jQuery仿Flash上下翻动的中英文导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/1

  • jQuery实现邮箱下拉列表自动补全功能

    记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht

  • jQuery实现Email邮箱地址自动补全功能代码

    本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码.分享给大家供大家参考,具体如下: jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入"qq"."Sina"."163"等等可以看到效果:鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

  • jQuery实现文本框邮箱输入自动补全效果

    邮箱自动完成的效果在网站上大多都看过,但是质量参差不齐,今天突然在网上看到一篇博客,感觉这个插件很好,就想来写一下分享给大家! 效果图如下: 完整demo代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • PHP+jQuery实现自动补全功能源码

    前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择.由于项目很多地方要用到这个功能,所以需要用心做一下.发现select2这个插件的功能可以满足当前需求. 在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回.可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效. 后来发现,select2插件在实现选中时是以数据中的id字段为准的.所以不管是json还是jsonp,ajax返回的数据都必须

  • jQuery实现Flash效果上下翻动的中英文导航菜单代码

    本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.2. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

随机推荐