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


Posted in Javascript onNovember 17, 2015

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

 效果图如下:

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

完整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);

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 #Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 #Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 #Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 #Javascript
js全选按钮的实现方法
Nov 17 #Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 #Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
PHP框架性能测试报告
2016/05/08 PHP
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
js电话号码验证方法
2015/09/28 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python实现简单flappy bird
2018/12/24 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Pandas分组与排序的实现
2019/07/23 Python
Python解析json代码实例解析
2019/11/25 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
校园安全主题班会
2015/08/12 职场文书