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


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语句可以不以;结尾的烦恼
Mar 08 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
详细分析Node.js 模块系统
Jun 28 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
桌面中心(一)创建数据库
2006/10/09 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python 函数基础知识汇总
2018/03/09 Python
python制作图片缩略图
2019/04/30 Python
Django model select的多种用法详解
2019/07/16 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
keras 多gpu并行运行案例
2020/06/10 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
如何清空Session
2015/02/23 面试题
《欢乐的泼水节》教学反思
2014/04/22 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书