jquery css实现邮箱自动补全
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery css实现邮箱自动补全,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3481字,纯文字阅读大概需要5分钟。
内容图文
![jquery css实现邮箱自动补全](/upload/InfoBanner/zyjiaocheng/349/1f648b1a7c4c4c948da816a6433fef3d.jpg)
今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果。下面是用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实现邮箱自动补全全部内容,希望文章能够帮你解决jquery css实现邮箱自动补全所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。