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用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
封装属于自己的JS组件
Jan 27 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php 高性能书写
2010/12/11 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
javascript读取RSS数据
2007/01/20 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
django框架两个使用模板实例
2019/12/11 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
小学生读书活动总结
2014/06/30 职场文书
社团活动总结格式
2014/08/29 职场文书
作风转变年心得体会
2014/10/22 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Nginx安装配置详解
2022/06/25 Servers