展会信息港展会大全

jquery实现邮箱自动补全功能
来源:互联网   发布日期:2016-03-24 20:02:55   浏览:2222次  

导读:这篇文章主要介绍了jquery实现邮箱自动补全功能,大家参考使用吧代码如下:(function($){ $.fn.autoMail = function(options){ ...

这篇文章主要介绍了jquery实现邮箱自动补全功能,大家参考使用吧

代码如下:

(function($){

$.fn.autoMail = function(options){

var autoMail = $(this);

var _value= '';

var _index= -1;

var _width= autoMail.outerWidth();

var _height= autoMail.outerHeight();

var _left= autoMail.offset().left;

var _top= autoMail.offset().top;

autoMail.defaults = {

deValue : '请输入邮箱地址',

textCls : 'text-gray',

listCls : 'list-mail',

listTop : 1,

mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"]

}

//初始化

autoMail.init = function(){

autoMail.vars = $.extend({},autoMail.defaults,options);

autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls);

autoMail.click(function(event){

autoMail.select().removeClass(autoMail.vars.textCls);

if(autoMail.val() != autoMail.vars.deValue){

autoMail.add();

autoMail.order(_value);

autoMail.list.find('.item').each(function(){

if($(this).text() == autoMail.val()){

$(this).siblings('.item').removeClass('select');

$(this).addClass('select');

return false;

}

})

}

event.stopPropagation();

})

autoMail.blur(function(event){

if(autoMail.val() == '' || autoMail.val() == autoMail.vars.deValue){

alert(autoMail.val())

autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls);

}

})

//文本域键盘松开事件

autoMail.keyup(function(event){

if($(autoMail.list).length == 0){

autoMail.add();

}

if(autoMail.list.length > 0){

var keyCode = event.keyCode;

//alert(keyCode)

switch(keyCode){

case 13:

autoMail.remove();

autoMail.blur();

break;

case 38:

_index--;

if(_index < 0){

_index = 0;

}

autoMail.keyOperate(_index);

break;

case 40:

_index++;

if(_index > $('.item',autoMail.list).length - 1){

_index = ('.item',autoMail.list).length - 1

}

autoMail.keyOperate(_index);

break;

default:

if(autoMail.val().indexOf('@') < 0){

_value = autoMail.val();

autoMail.order(_value);

}

}

}

})

$(document).click(function(){

if($(autoMail.list).length > 0){

autoMail.remove();

autoMail.blur();

}

})

}

//创建列表

autoMail.create = function(){

var li = '';

for(var i = 0; i < autoMail.vars.mailArr.length; i++){

li += '<li class="item">'+ '<span class="style">' + '@' + autoMail.vars.mailArr[i] + '</span>' + '</li>';

}

autoMail.list = $('<div class="'+ autoMail.vars.listCls +'"><ul>'+ li +'</ul></div>');

autoMail.list.css({

'position' : 'absolute',

'left': _left,

'top': _top + _height + autoMail.vars.listTop,

'min-width': _width

})

autoMail.list.appendTo($('body'));

//邮箱列表绑定事件

autoMail.list.find('.item').click(function(event){

autoMail.getVal($(this));

autoMail.remove();

event.stopPropagation();

})

autoMail.list.find('.item').hover(

function(){ $(this).addClass('hover'); },

function(){ $(this).removeClass('hover'); }

)

return autoMail.list;

}

//序列化列表

autoMail.order = function(_value){

$('.name',autoMail.list).remove();

var name = $('<span class="name">'+ _value +'</span>');

$('.item',autoMail.list).prepend(name);

}

//添加列表

autoMail.add = function(){

if(typeof autoMail.list == 'undefined' || autoMail.list.length < 1) autoMail.create();

}

//移除列表

autoMail.remove = function(){

if(autoMail.list.length > 0){

autoMail.list.remove();

delete autoMail.list;

}

}

//获取值

autoMail.getVal = function(obj){

if($('.name',obj).text() != ''){

var selectValue = obj.text();

autoMail.val(selectValue);

}else{

return false;

}

}

//键盘操作

autoMail.keyOperate = function(_index){

$('.item',autoMail.list).eq(_index).addClass('hover').siblings('.item').removeClass('hover');

autoMail.val($('.item',autoMail.list).eq(_index).text());

}

//开始初始话动作...

autoMail.init();

}

})(jQuery)

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="./jquery.js"></script>

<script type="text/javascript" src="./autoMail.js"></script>

<script type="text/javascript">

$(function(){

$('.automail').autoMail();

})

</script>

<style type="text/css">

*{padding: 0; margin: 0;}

body{font-family: "微软雅黑"; color: #333; font-size: 12px;}

ul{list-style: none;}

input{ width: 180px; height: 16px; line-height: 16px; margin: 100px; padding: 4px; border: 1px solid #aaa; font-size: 12px; font-family: "微软雅黑"; }

.list-mail ul{ border: 1px solid #aaa; line-heihgt: 24px; padding: 6px; }

.list-mail li{ cursor: pointer; padding: 2px 3px; margin-bottom: 2px; }

.list-mail .name{ color: #982114; }

.list-mail .hover{ background: #fefacf; }

.list-mail .select{ background: #dedaae; }

</style>

</head>

<body>

<div class="test"></div>

<input type="text" class="automail" />

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港