邮箱下拉自动填充选择示例代码附图


Posted in Javascript onApril 03, 2014

1.需要一个js文件:jquery.mailAutoComplete-3.1.js

(function($){ 
$.fn.mailAutoComplete = function(options){ 
var defaults = { 
boxClass: "mailListBox", //外部box样式 
listClass: "mailListDefault", //默认的列表样式 
focusClass: "mailListFocus", //列表选样式中 
markCalss: "mailListHlignt", //高亮样式 
zIndex: 1, 
autoClass: true, //是否使用插件自带class样式 
mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组 
textHint: false, //文字提示的自动显示与隐藏 
hintText: "", 
focusColor: "#333", 
blurColor: "#999" 
}; 
var settings = $.extend({}, defaults, options || {}); //页面装载CSS样式 
if(settings.autoClass && $("#mailListAppendCss").size() === 0){ 
$('<style id="mailListAppendCss" type="text/css">.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}</style>').appendTo($("head")); 
} 
var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量 
var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor; 
//创建邮件内部列表内容 
$.createHtml = function(str, arr, cur){ 
var mailHtml = ""; 
if($.isArray(arr)){ 
$.each(arr, function(i, n){ 
if(i === cur){ 
mailHtml += '<div class="mailHover '+cf+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>'; 
}else{ 
mailHtml += '<div class="mailHover '+cl+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>'; 
} 
}); 
} 
return mailHtml; 
}; 
//一些全局变量 
var index = -1, s; 
$(this).each(function(){ 
var that = $(this), i = $(".justForJs").size(); 
if(i > 0){ //只绑定一个文本框 
return; 
} 
var w = that.outerWidth(), h = that.outerHeight(); //获取当前对象(即文本框)的宽高 
//样式的初始化 
that.wrap('<span style="display:inline-block;position:relative;"></span>') 
.before('<div id="mailListBox_'+i+'" class="justForJs '+cb+'" style="min-width:'+w+'px;_width:'+w+'px;position:absolute;left:-6000px;top:'+h+'px;z-index:'+z+';"></div>'); 
var x = $("#mailListBox_" + i), liveValue; //列表框对象 
that.focus(function(){ 
//父标签的层级 
$(this).css("color", fc).parent().css("z-index", z); 
//提示文字的显示与隐藏 
if(hint && text){ 
var focus_v = $.trim($(this).val()); 
if(focus_v === text){ 
$(this).val(""); 
} 
} 
//键盘事件 
$(this).keyup(function(e){ 
s = v = $.trim($(this).val()); 
if(/@/.test(v)){ 
s = v.replace(/@.*/, ""); 
} 
if(v.length > 0){ 
//如果按键是上下键 
if(e.keyCode === 38){ 
//向上 
if(index <= 0){ 
index = newArr.length; 
} 
index--; 
}else if(e.keyCode === 40){ 
//向下 
if(index >= newArr.length - 1){ 
index = -1; 
} 
index++; 
}else if(e.keyCode === 13){ 
//回车 
if(index > -1 && index < newArr.length){ 
//如果当前有激活列表 
$(this).val($("#mailList_"+index).text()); 
} 
}else{ 
if(/@/.test(v)){ 
index = -1; 
//获得@后面的值 
//s = v.replace(/@.*/, ""); 
//创建新匹配数组 
var site = v.replace(/.*@/, ""); 
newArr = $.map(mailArr, function(n){ 
var reg = new RegExp(site); 
if(reg.test(n)){ 
return n; 
} 
}); 
}else{ 
newArr = mailArr; 
} 
} 
x.html($.createHtml(s, newArr, index)).css("left", 0); 
if(e.keyCode === 13){ 
//回车 
if(index > -1 && index < newArr.length){ 
//如果当前有激活列表 
x.css("left", "-6000px"); 
} 
} 
}else{ 
x.css("left", "-6000px"); 
} 
}).blur(function(){ 
if(hint && text){ 
var blur_v = $.trim($(this).val()); 
if(blur_v === ""){ 
$(this).val(text); 
} 
} 
$(this).css("color", bc).unbind("keyup").parent().css("z-index",0); 
x.css("left", "-6000px"); 
}); 
//鼠标经过列表项事件 
//鼠标经过 
$(".mailHover").live("mouseover", function(){ 
index = Number($(this).attr("id").split("_")[1]); 
liveValue = $("#mailList_"+index).text(); 
x.children("." + cf).removeClass(cf).addClass(cl); 
$(this).addClass(cf).removeClass(cl); 
}); 
}); 
x.bind("mousedown", function(){ 
that.val(liveValue); 
}); 
}); 
}; 
})(jQuery);

2.jq库当然必不可少了,这里就略了

下面来测试

3.样式表:

<style type="text/css"> 
.out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;} 
.list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;} 
.focus_box{background:#f0f3f9;} 
.mark_box{color:#c00;} 
</style>

4.测试代码
<p>自定义class展示:<input type="text" id="customTest" size="28" /></p> <script src="js/jquery-1.6.min.js" type="text/javascript"></script> 
<script src="js/jquery.mailAutoComplete-3.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$("#customTest").mailAutoComplete({ 
boxClass: "out_box", //外部box样式 
listClass: "list_box", //默认的列表样式 
focusClass: "focus_box", //列表选样式中 
markCalss: "mark_box", //高亮样式 
autoClass: false, 
textHint: true, //提示文字自动隐藏 
hintText: "请输入邮箱地址" 
}); 
}) 
</script>

邮箱下拉自动填充选择示例代码附图
Javascript 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
JS获取网页属性包括宽、高等等
Apr 03 #Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 #Javascript
js实现的复制兼容chrome和IE
Apr 03 #Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 #Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 #Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 #Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 #Javascript
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP反射API示例分享
2016/10/08 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Django nginx配置实现过程详解
2020/09/10 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
中专毕业生自我鉴定
2013/11/21 职场文书
城管大队整治方案
2014/05/06 职场文书
电子工程求职信
2014/07/17 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
党员自评材料范文
2014/12/17 职场文书
财务稽核岗位职责
2015/04/13 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
2016年清明节寄语
2015/12/04 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
承诺书怎么写 ?
2019/04/16 职场文书