jquery css实现邮箱自动补全


Posted in Javascript onNovember 14, 2016

 今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果。下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习。

HTML代码:emailAutoComple.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>邮箱自动补全</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="css/emailAutoComple.css">
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/emailAutoComple.js"></script>
  <script type="text/javascript">
    $(function(){
    $.AutoComplete("#email");  //(要补全文本框的id)
    });
  </script>
 </head>
 
 <body>
  <form action="">
        姓名:<input type="text" name="userName" id="userName"/><br/>
        邮箱:<input type="text" name="email" id="email"/>
  </form>
 </body>
</html>

 JS代码:js/emailAutoComple.js(实现自动补全的关键代码)

jQuery.AutoComplete = function(selector){
  var elt = $(selector);
  var strHtml = '<div class="AutoComplete" id="AutoComplete">'+
        '    <ul class="AutoComplete_ul">'+
        '      <li hz="@163.com"></li>'+
        '      <li hz="@126.com"></li>'+
        '      <li hz="@139.com"></li>'+
        '      <li hz="@189.com"></li>'+
        '      <li hz="@qq.com"></li>'+
        '      <li hz="@vip.sina.com"></li>'+
        '      <li hz="@sina.cn"></li>'+
        '      <li hz="@sina.com"></li>'+
        '      <li hz="@sohu.com"></li>'+
        '      <li hz="@hotmail.com"></li>'+
        '      <li hz="@gmail.com"></li>'+
        '      <li hz="@wo.com.cn"></li>'+
        '      <li hz="@21cn.com"></li>'+
        '      <li hz="@aliyun.com"></li>'+
        '      <li hz="@yahoo.com"></li>'+
        '      <li hz="@foxmail.com"></li>'+
        '    </ul>'+
        '  </div>';
  //将div追加到body上
  $('body').append(strHtml);     
  var autoComplete,autoLi;
  autoComplete = $('#AutoComplete');    
  autoComplete.data('elt',elt);
  autoLi = autoComplete.find('li');
  autoLi.mouseover(function(){
    $(this).siblings().filter('.hover').removeClass('hover');
    $(this).addClass('hover');
  }).mouseout(function(){
    $(this).removeClass('hover');
  }).mousedown(function(){
    autoComplete.data('elt').val($(this).text()).change();
    autoComplete.hide();
  });
  //用户名补全+翻动
  elt.keyup(function(e){
    if(/13|38|40|116/.test(e.keyCode) || this.value==''){
      return false;
    }
    var username = this.value;
    if(username.indexOf('@')==-1){
      autoComplete.hide();
      return false;
    }
    autoLi.each(function(){
      this.innerHTML = username.replace(/\@+.*/,'')+$(this).attr('hz');
      if(this.innerHTML.indexOf(username)>=0){
        $(this).show();
      }else{
        $(this).hide();  
      }
    }).filter('.hover').removeClass('hover');
    autoComplete.show().css({
      left : $(this).offset().left,
      top : $(this).offset().top + $(this).outerHeight(true) - 1,
      position: 'absolute',
      zIndex: '99999'
    });
    if(autoLi.filter(':visible').length==0){
      autoComplete.hide();
    }else{
      autoLi.filter(':visible').eq(0).addClass('hover');      
    }
  }).keydown(function(e){
    if(e.keyCode==38){ //上
      autoLi.filter('.hover').prev().not('.AutoComplete_title').addClass('hover').next().removeClass('hover');
    }else if(e.keyCode==40){ //下
      autoLi.filter('.hover').next().addClass('hover').prev().removeClass('hover');
    }else if(e.keyCode==13){ //确定
      autoLi.filter('.hover').mousedown();
    }
  }).focus(function(){
    autoComplete.data('elt',$(this));
  }).blur(function(){
    autoComplete.hide();
  });
};

CSS代码:css/emailAutoComple.css

#AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:150px;}
#AutoComplete ul{list-style-type:none;margin:0;padding:0;}
#AutoComplete li{color:#333;cursor:pointer;font:12px/22px \5b8b\4f53;text-indent:5px;}
#AutoComplete .hover{background:#6eb6fe;color:#fff;}

效果图:

jquery css实现邮箱自动补全

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中getJSON的使用方法
Dec 13 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
JS常用算法实现代码
Nov 14 #Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 #Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 #Javascript
JS实现的几个常用算法
Nov 12 #Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 #Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 #Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
大学生应聘自荐信
2013/10/11 职场文书
python 中yaml文件用法大全
2021/07/04 Python
bose降噪耳机音能消除人声吗
2022/04/19 数码科技
MongoDB数据库之添删改查
2022/04/26 MongoDB
Android中View.post和Handler.post的关系
2022/06/05 Java/Android