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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
javascript事件问题
Sep 05 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Sort()函数的多种用法
Mar 20 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 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
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
vuejs指令详解
2017/02/07 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
详解Python中的静态方法与类成员方法
2017/02/28 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
借款协议书
2014/04/12 职场文书
工作推荐信范文
2014/05/10 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书