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


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的IE和Firefox兼容性汇编
Jul 01 Javascript
犀利的js 函数集合
Jun 11 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
谈一谈javascript闭包
Jan 28 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
React如何实现浏览器打印部分内容详析
May 19 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
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python fileinput模块使用介绍
2014/11/30 Python
python模块之paramiko实例代码
2018/01/31 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python脚本后台执行方式
2019/12/21 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
HTML5 解析规则分析
2009/08/14 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
异步传递消息系统的作用
2016/05/01 面试题
业务经理的岗位职责
2013/11/16 职场文书
八年级历史教学反思
2014/01/10 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
营业用房租赁协议书
2014/11/26 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL