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 相关文章推荐
url 特殊字符 传递参数解决方法
Jan 01 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 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
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python中Genarator函数用法分析
2015/04/08 Python
Python读取键盘输入的2种方法
2015/06/16 Python
python tornado微信开发入门代码
2018/08/24 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python调用服务接口的实例
2019/01/03 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python json转字典字符方法实例解析
2020/04/13 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
给实习单位的感谢信
2014/02/01 职场文书
祝酒词范文
2015/08/12 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python