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 应用 JQuery.groupTable.js
Dec 15 Javascript
JS控制输入框内字符串长度
May 21 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
javascript表格的渲染组件
Jul 03 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
php调用mysql存储过程
2007/02/14 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Django的Modelforms用法简介
2019/07/27 Python
如何基于python实现归一化处理
2020/01/20 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
什么是Smart Navigation?
2016/07/03 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
师说教学反思
2014/02/07 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
2017春节晚会开幕词
2016/03/03 职场文书