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


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 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
关于js datetime的那点事
Nov 15 Javascript
javascript cookie的简单应用
Feb 24 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
详解用node编写自己的cli工具
May 23 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
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编程中字符串处理的5个技巧小结
2007/11/13 PHP
使用php来实现网络服务
2009/09/15 PHP
php检测useragent版本示例
2014/03/24 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
python中私有函数调用方法解密
2016/04/29 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
如何使用python写截屏小工具
2020/09/29 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
销售实习自我鉴定
2013/12/07 职场文书
留学生求职信
2014/06/03 职场文书
旅游活动总结
2014/08/27 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang