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 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
学习python 之编写简单乘法运算题
2016/02/27 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python join方法使用详解
2019/07/30 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
18岁生日感言
2014/01/12 职场文书
钱学森观后感
2015/06/04 职场文书