jquery css实现邮箱自动补全

2024-02-28 17:18:19

今天在公司做一个电子商务网站的注册会员时，要求用户在电子邮箱文本框中输入时，给与热点提示常用的电子邮箱，帮助用户选择，提高体验效果。下面是用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实现邮箱下拉列表自动补全功能

记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht
jQuery验证手机号邮箱身份证的正则表达式（含港澳台）

自己对正则验证也没系统用过,这次自己做个demo,一下子把这些全都用上了,下次有需要直接来拿了. 以下代码是在页面使用JQuery进行验证的,也有在后台进行验证的,可以试试,都一样的原理. 直接上代码:注意:(有些验证规则当然不仅仅是本文的,也许还有其他更好的,可以留言交流) 手机号:(移动-电信-联通) var tel = $("#PhoneNumber").val();//获取输入的手机号 var yidongreg = /^(134[012345678]\d{7}|1[34578
用AJAX实现页面登陆以及注册用户名验证的简单实例

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX 是一种用于创建快速动态网页的技术.其核心是 JavaScript 对象 XMLHttpRequest.该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术.简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户. 通过在后台与
php实现登陆模块功能示例

本文实例讲述了php实现登陆模块功能的方法.分享给大家供大家参考,具体如下: 最近在学习php.学了一点关于登陆的东西,写下来备忘. 新建四个页面,分别命名为: login.php check.php index.php error.php login页面用表单建立一个登陆页面,不多说了.在代码里用js脚本判断用户名和密码不能为空,为空则重置焦点.代码如下: <script type="text/JavaScript"> function jc() { var userNa
js表单登陆验证示例

本文实例讲述了js表单登陆验证的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
JavaWeb登陆功能实现代码

本文实例为大家分享了JavaWeb登陆功能的方法,供大家参考,具体内容如下首先我们要JavaWeb登陆的基本流程:JSP页面发送请求-->Servlet-->Servlet通过调用方法从数据库中得到数据并将结果返回页面. 我们先建立三个jsp页面,包括login.jsp(登陆页面).index.jsp(显示登陆成功后的信息).error.jsp(登录失败的页面),其中后两个页面的内容可以随意写,而login.jsp页面的主要内容如下: <form action="LoginS
如何验证会员系统中用户的邮箱是否真实存在

在开发网站时,我们需要对用户注册的邮箱进行核对与验证,用户填写的邮箱是否有效邮箱. 好吧,我们先从数据库入手,修改用户表让用户有填写email的字段,添加了2个字段: ALTER TABLE [dbo].[Users] ADD [Email] VARCHAR(100) NULL, [IsVerify] BIT NOT NULL DEFAULT(0) SELECT * FROM [dbo].[Users] 由于你需要做2个功能,一个是要求用户验证邮箱有效性,也有可以以邮箱来让用户修改用户密码.因此
微信小程序-详解微信登陆、微信支付、模板消息

微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio
根据输入邮箱号跳转到相应登录地址的解决方法

话不多说,跟着小编一起来看下具体的实现代码吧 <script> var hash={ 'qq.com':'http://mail.qq.com', 'gmail.com': 'http://mail.google.com', 'sina.com': 'http://mail.sina.com.cn', '163.com': 'http://mail.163.com', '126.com': 'http://mail.126.com', 'yeah.net': 'http://www.yeah.
Java实现邮箱找回密码实例代码

通过邮件找回密码功能的实现 1.最近开发一个系统,有个需求就是,忘记密码后通过邮箱找回.现在的系统在注册的时候都会强制输入邮箱,其一目的就是通过邮件绑定找回,可以进行密码找回.通过java发送邮件的功能我就不说了,重点讲找回密码. 2.参考别人的思路:发送邮件→请求邮件里的URL→验证url→{验证成功修改密码,不成功跳转到失败页面} 重点就是如何生成这个url和如何解析这个url. 需要注意的是一个url只能修改一次密码,当同一帐号发送多封邮件,只有最后一封邮件的url 邮箱 3.加密能防止
在js中实现邮箱格式的验证方法(推荐)

如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在此处插入标题</title> <script typ

jquery css实现邮箱自动补全

相关推荐

随机推荐