首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 04, 2015

记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写得不错，现在回想起来，转载一下，方便查阅。

邮箱的广泛使用得益于它的免费，因此很多网站在注册的时候都会直接使用邮箱作为账号名

为了提高用户的体验，很多网站都会实现邮箱输入的自动提示功能。

实现效果如图所示：

核心代码（需要jquery的支持）：

(function($){
  $.fn.mailAutoComplete = function(options){
    var defaults = {
      boxClass: "mailListBox", //外部box样式
      listClass: "mailListDefault", //默认的列表样式
      focusClass: "mailListFocus", //列表选样式中
      markCalss: "mailListHlignt", //高亮样式
      zIndex: 1,
      autoClass: true, //是否使用插件自带class样式
      mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
      textHint: false, //文字提示的自动显示与隐藏
      hintText: "",
      focusColor: "#333"
      //blurColor: "#999"
    };
    var settings = $.extend({}, defaults, options || {});
    
    //页面装载CSS样式
    if(settings.autoClass && $("#mailListAppendCss").size() === 0){
      $('<style id="mailListAppendCss" type="text/css">.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}</style>').appendTo($("head"));  
    }
    var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量
    var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor;
    //创建邮件内部列表内容
    $.createHtml = function(str, arr, cur){
      var mailHtml = "";
      if($.isArray(arr)){
        $.each(arr, function(i, n){
          if(i === cur){
            mailHtml += '<div class="mailHover '+cf+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>';  
          }else{
            mailHtml += '<div class="mailHover '+cl+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>';  
          }
        });
      }
      return mailHtml;
    };
    //一些全局变量
    var index = -1, s;
    $(this).each(function(){
      var that = $(this), i = $(".justForJs").size();  
      if(i > 0){ //只绑定一个文本框
         return;  
      }
      var w = that.outerWidth(), h = that.outerHeight(); //获取当前对象（即文本框）的宽高
      //样式的初始化
      that.wrap('<span style="display:inline-block;position:relative;"></span>')
        .before('<div id="mailListBox_'+i+'" class="justForJs '+cb+'" style="min-width:'+w+'px;_width:'+w+'px;position:absolute;left:-6000px;top:'+h+'px;z-index:'+z+';"></div>');
      var x = $("#mailListBox_" + i), liveValue; //列表框对象
      that.focus(function(){
        //父标签的层级
        $(this).css("color", fc).parent().css("z-index", z);  
        //提示文字的显示与隐藏
        if(hint && text){
          var focus_v = $.trim($(this).val());
          if(focus_v === text){
            $(this).val("");
          }
        }
        //键盘事件
        $(this).keyup(function(e){
          s = v = $.trim($(this).val());  
          if(/@/.test(v)){
            s = v.replace(/@.*/, "");
          }
          if(v.length > 0){
            //如果按键是上下键
            if(e.keyCode === 38){
              //向上
              if(index <= 0){
                index = newArr.length;  
              }
              index--;
            }else if(e.keyCode === 40){
              //向下
              if(index >= newArr.length - 1){
                index = -1;
              }
              index++;
            }else if(e.keyCode === 13){
              //回车
              if(index > -1 && index < newArr.length){
                //如果当前有激活列表
                $(this).val($("#mailList_"+index).text());  
              }
            }else{
              if(/@/.test(v)){
                index = -1;
                //获得@后面的值
                //s = v.replace(/@.*/, "");
                //创建新匹配数组
                var site = v.replace(/.*@/, "");
                newArr = $.map(mailArr, function(n){
                  var reg = new RegExp(site);  
                  if(reg.test(n)){
                    return n;  
                  }
                });
              }else{
                newArr = mailArr;
              }
            }
            x.html($.createHtml(s, newArr, index)).css("left", 0);
            if(e.keyCode === 13){
              //回车
              if(index > -1 && index < newArr.length){
                //如果当前有激活列表
                x.css("left", "-6000px");  
              }
            }
          }else{
            x.css("left", "-6000px");  
          }
        }).blur(function(){
          if(hint && text){
            var blur_v = $.trim($(this).val());
            if(blur_v === ""){
              $(this).val(text);
            }
          }
          $(this).css("color", bc).unbind("keyup").parent().css("z-index",0);
          x.css("left", "-6000px");  
          
        });  
        //鼠标经过列表项事件
        //鼠标经过
        $(".mailHover").live("mouseover", function(){
          index = Number($(this).attr("id").split("_")[1]);  
          liveValue = $("#mailList_"+index).text();
          x.children("." + cf).removeClass(cf).addClass(cl);
          $(this).addClass(cf).removeClass(cl);
        });
      });

      x.bind("mousedown", function(){
        that.val(liveValue);    
      });
    });
  };
  
})(jQuery);

html示例：

<div class="reg_lin1">
<div class="lin1_1">常用邮箱：</div>
<div class="lin1_2"><input type="text" class = "reg_text" id = "email" name = "email"/></div>
<div class="lin1_3"></div>
</div>

调用的jquery代码：

$("#email").mailAutoComplete({
boxClass: "out_box", //外部box样式
listClass: "list_box", //默认的列表样式
focusClass: "focus_box", //列表选样式中
markCalss: "mark_box", //高亮样式
autoClass: false,
textHint: true //提示文字自动隐藏
});

css，这大家自己修改成自己想要的色调

<style type="text/css">
    .out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;}
    .list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;}
    .focus_box{background:#f0f3f9;}
    .mark_box{color:#c00;}
  </style>

效果二：

1、此插件为宽度自适应的，也就是当内部文字过长时，外部的div会宽度自动延伸的。在自定义CSS时如果设置了宽度值，则在非IE6浏览器下，宽度自适应失效；
2、无需在样式中为最外部的box设置position属性，或是宽度及高度，这些工作jQuery 插件已经帮你完成，设置了这些属性反而不利于效果的展现；
3、此插件只能使用在单行文本框上，由于未对其他标签类型的元素做限制，所以如果绑定对象不正确，可能会出现一些意想不到的情况.
4.欢迎在使用中提出各种问题和bug.
--------------------------------------------
注:使用方法
CSS代码：

.out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;}
.list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;}
.focus_box{background:#f0f3f9;}
.mark_box{color:#c00;}

JS代码：

$("#customTest").mailAutoComplete({
  boxClass: "out_box", //外部box样式
  listClass: "list_box", //默认的列表样式
  focusClass: "focus_box", //列表选样式中
  markCalss: "mark_box", //高亮样式
  autoClass: false,
  textHint: true, //提示文字自动隐藏
  hintText: "请输入邮箱地址"
});
(function($){
  $.fn.mailAutoComplete = function(options){
    var defaults = {
      boxClass: "mailListBox", //外部box样式
      listClass: "mailListDefault", //默认的列表样式
      focusClass: "mailListFocus", //列表选样式中
      markCalss: "mailListHlignt", //高亮样式
      zIndex: 1,
      autoClass: true, //是否使用插件自带class样式
      mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
      textHint: false, //文字提示的自动显示与隐藏
      hintText: "",
      focusColor: "#333",
      blurColor: "#999"
    };
    var settings = $.extend({}, defaults, options || {});
     
    //页面装载CSS样式
    if(settings.autoClass && $("#mailListAppendCss").size() === 0){
      $('<style id="mailListAppendCss" type="text/css">.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}</style>').appendTo($("head")); 
    }
    var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量
    var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor;
    //创建邮件内部列表内容
    $.createHtml = function(str, arr, cur){
      var mailHtml = "";
      if($.isArray(arr)){
        $.each(arr, function(i, n){
          if(i === cur){
            mailHtml += '<div class="mailHover '+cf+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>';  
          }else{
            mailHtml += '<div class="mailHover '+cl+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>';  
          }
        });
      }
      return mailHtml;
    };
    //一些全局变量
    var index = -1, s;
    $(this).each(function(){
      var that = $(this), i = $(".justForJs").size(); 
      if(i > 0){ //只绑定一个文本框
        return; 
      }
      var w = that.outerWidth(), h = that.outerHeight(); //获取当前对象（即文本框）的宽高
      //样式的初始化
      that.wrap('<span style="display:inline-block;position:relative;"></span>')
        .before('<div id="mailListBox_'+i+'" class="justForJs '+cb+'" style="min-width:'+w+'px;_width:'+w+'px;position:absolute;left:-6000px;top:'+h+'px;z-index:'+z+';"></div>');
      var x = $("#mailListBox_" + i), liveValue; //列表框对象
      that.focus(function(){
        //父标签的层级
        $(this).css("color", fc).parent().css("z-index", z);  
        //提示文字的显示与隐藏
        if(hint && text){
          var focus_v = $.trim($(this).val());
          if(focus_v === text){
            $(this).val("");
          }
        }
        //键盘事件
        $(this).keyup(function(e){
          s = v = $.trim($(this).val()); 
          if(/@/.test(v)){
            s = v.replace(/@.*/, "");
          }
          if(v.length > 0){
            //如果按键是上下键
            if(e.keyCode === 38){
              //向上
              if(index <= 0){
                index = newArr.length; 
              }
              index--;
            }else if(e.keyCode === 40){
              //向下
              if(index >= newArr.length - 1){
                index = -1;
              }
              index++;
            }else if(e.keyCode === 13){
              //回车
              if(index > -1 && index < newArr.length){
                //如果当前有激活列表
                $(this).val($("#mailList_"+index).text()); 
              }
            }else{
              if(/@/.test(v)){
                index = -1;
                //获得@后面的值
                //s = v.replace(/@.*/, "");
                //创建新匹配数组
                var site = v.replace(/.*@/, "");
                newArr = $.map(mailArr, function(n){
                  var reg = new RegExp(site); 
                  if(reg.test(n)){
                    return n;  
                  }
                });
              }else{
                newArr = mailArr;
              }
            }
            x.html($.createHtml(s, newArr, index)).css("left", 0);
            if(e.keyCode === 13){
              //回车
              if(index > -1 && index < newArr.length){
                //如果当前有激活列表
                x.css("left", "-6000px");  
              }
            }
          }else{
            x.css("left", "-6000px");  
          }
        }).blur(function(){
          if(hint && text){
            var blur_v = $.trim($(this).val());
            if(blur_v === ""){
              $(this).val(text);
            }
          }
          $(this).css("color", bc).unbind("keyup").parent().css("z-index",0);
          x.css("left", "-6000px");  
           
        }); 
        //鼠标经过列表项事件
        //鼠标经过
        $(".mailHover").live("mouseover", function(){
          index = Number($(this).attr("id").split("_")[1]);  
          liveValue = $("#mailList_"+index).text();
          x.children("." + cf).removeClass(cf).addClass(cl);
          $(this).addClass(cf).removeClass(cl);
        });
      });
 
      x.bind("mousedown", function(){
        that.val(liveValue);    
      });
    });
  };
   
})(jQuery);

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 #Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 #Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 #Javascript
jQuery+PHP星级评分实现方法
Oct 02 #Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 #Javascript
通过js获取上传的图片信息（临时保存路径，名称，大小）然后通过ajax传递给后端的方法
Oct 01 #Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 #Javascript
uniapp(4) self(1) Hudi(1) feDisplacementMap(1) element-china-area-data(1) Apache(17) Flutter(2) 数据重复(1) Navigator(1) tabBar(1)
You might like
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php多进程应用场景实例详解
2019/07/22 PHP
js查错流程归纳
2012/05/04 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
轮播图组件js代码
2016/08/08 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
印尼在线旅游门户网站：NusaTrip
2019/11/01 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
村优秀党员事迹材料
2014/01/15 职场文书
政治学求职信
2014/06/03 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android