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


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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
js实现文字截断功能
Sep 14 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
原生js实现碰撞检测
Mar 12 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
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Python字节单位转换实例
2019/12/05 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
爱国卫生月实施方案
2014/02/21 职场文书
企业理念标语
2014/06/09 职场文书
班级文化建设标语
2014/06/23 职场文书
模范教师材料大全
2014/12/16 职场文书
干部考核工作总结2015
2015/07/24 职场文书