// mailAutoComplete.js v1.0 邮箱输入自动提示
// 2010-06-18 v2.0 使用CSS class类代替CSS对象,同时增强代码可读性
// 2010-06-18 v2.1 宽度自适应的添加
// 2010-06-18 v2.2 修复多个元素同时调用此方法的一些bug
// 2010-06-30 修改搜狐邮箱名的笔误
// 2010-06-30 修复中文回车内容为空的问题
// 2010-08-17 v3.0 重写邮件显示的核心方法,提高显示性能
// 2010-09-01 修复Firefox下点击列表无法取值的问题
// 2010-09-03 添加提示文字隐藏以及文字颜色变化
(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);

//实例

<div class="demo" style="padding:3% 0 6% 35%;">
<p>自定义class展示:<span style="display:inline-block;position:relative;"><div id="mailListBox_0" class="justForJs out_box" style="min-width:230px;_width:230px;position:absolute;left:-6000px;top:22px;z-index:1;"></div><input type="text" id="customTest" style="color:#999;" size="28" value="请输入邮箱地址" autocomplete="off"></span></p>
</div>

<script type="text/javascript">
  $("#customTest").mailAutoComplete({
  boxClass: "out_box", //外部box样式
  listClass: "list_box", //默认的列表样式
  focusClass: "focus_box", //列表选样式中
  markCalss: "mark_box", //高亮样式
  autoClass: false,
  textHint: true, //提示文字自动隐藏
  hintText: "请输入邮箱地址"
  });
  </script>

邮箱地址自动提示jQuery插件的更多相关文章

  1. jquery 实现邮箱输入自动提示功能:(一)

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  2. jquery 实现邮箱输入自动提示功能:(二)

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  3. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  4. AJ学IOS 之小知识之_xcode插件的删除方法_自动提示图片插件KSImageNamed有时不灵_分类或宏之类不能自动提示,

    AJ分享,必须精品 一:解决解决自动提示图片插件KSImageNamed有时不灵_分类或宏之类不能自动提示 其实,插件神马的我们自己也能写,并没有想象中的那么难,不过目前我们还是先解决当前问题 在做微 ...

  5. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

  6. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  7. Eclipse设置:背景与字体大小、xml文件中字体大小调整和自动提示 SVN插件安装

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  8. 省市区地址三级联动jQuery插件Distpicker使用

    插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...

  9. solr自动提示 - jquery ui autocomplete

    需求: 搜索框中 输入部分关键词之后,有下拉联想提示.选中提示,使用鼠标或者使用enter键,则触发搜索功能.没有选择搜索提示,使用部分输入关键词作为搜索,直接使用enter键也能触发搜索功能.整个过 ...

随机推荐

  1. bzoj 2839: 集合计数【容斥原理+组合数学】

    首先,考虑容斥,我们所要的答案是并集至少有\( k \)个数的方案数减去并集至少有\( k+1 \)个数的方案数加上并集至少有\( k \)个数的方案数-- 在n个数中选i个的方案数是\( C_{n} ...

  2. 洛谷 P2764 最小路径覆盖问题【匈牙利算法】

    经典二分图匹配问题.把每个点拆成两个,对于原图中的每一条边(i,j)连接(i,j+n),最小路径覆盖就是点数n-二分图最大匹配.方案直接顺着匹配dsf.. #include<iostream&g ...

  3. 【POJ - 2251】Dungeon Master (bfs+优先队列)

    Dungeon Master  Descriptions: You are trapped in a 3D dungeon and need to find the quickest way out! ...

  4. jsp标准标签库——jstl

    JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. 除了这些,它还提供 ...

  5. mac下 netbeans 8.02中文版设置代码自动补齐 + eclipse自动补齐

    netbeans自带的自动补齐快捷键是commad+\ 我想要的是在输入的时候,有自动提示,找了半天也没找到怎么搞. 因为我是用的mac系统 后来参考其他的设置,找到了设置的方法,把这个方法记录一下. ...

  6. jmeter(七)函数

    JMeter函数是一些能够转化在测试树中取样器或者其他配置元件的域的特殊值.一个函数的调用就像这样:${_functionName(var1,var2,var3)},-functionName匹配函数 ...

  7. windows系统下如何正确安装Cygwin(图文详解)

    我的操作系统信息是 1.在官网https://cygwin.com/install.html下载win64位安装包 选择包的下载存放目录,点击“下一步”   为了使我们安装的Cygwin能够编译程序, ...

  8. Uediter的引用和取值

    页面应用Uediter控件,代码如下: <tr> <td align="center" class="xwnr_j"> <asp: ...

  9. GatewayWorker+Laravel demo

    GatewayWorker 结合 Laravel 使用的简单案例,重点是在Laravel中使用GatewayClient发送消息 主要流程:GatewayWorker主要负责推送消息给客户端但不接受客 ...

  10. Android基础夯实--重温动画(四)之属性动画 ValueAnimator详解

    宝剑锋从磨砺出,梅花香自苦寒来:千淘万漉虽辛苦,吹尽狂沙始到金: 长风破浪会有时,直挂云帆济沧海 一.摘要 Animator类作为属性动画的基类,它是一个抽象类,它提供了实现动画的基本架构,但是我们不 ...