这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要为大家详细介绍了 jquery CSS 实现邮箱自动补全功能, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果。下面是用 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;
- }
效果图:
来源: http://www.phperz.com/article/17/0623/330477.html