文本框邮箱地址自动提示jQuery插件

正所谓“一图胜千言”，参见下面的截图：

就是在须要输入邮箱地址的地方给以邮箱地址的提示，简化输入，提升用户体验。

2、demo与下载

要查看插件使用效果，您能够狠狠地点击这里：邮箱地址自动提示demo

目前版本为3.1，您能够狠狠地点击这里： jquery.mailAutoComplete-3.1.js

3、插件的使用

使用很方便的，方法名为：mailAutoComplete，以下面最简单的使用实例：

$("#test").mailAutoComplete();

表示的意思就是id为test的文本框输入文字时会有邮件地址提示。

插件中有一套本身的样式，颜色为#369与#fff两色。大体效果以下图：

固然，您能够自定义您本身的列表样式，留给您的API为一些可自定义的class。您能够看下表（此插件的一些参数）：

参数	默认值	说明
boxClass	mailListBox	指类名 字符串 表最外框的样式
listClass	mailListDefault	类名 字符串 默认的列表样式
focusClass	mailListFocus	类名 字符串 当前选中的列表的样式
markCalss	mailListHlignt	类名 字符串 指高亮字符的样式
zIndex	1	整数 浮动层的层级
autoClass	true	布尔型 指是否使用插件自带的样式
mailArr	["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","souhu.com","sina.com"]	提示的数组内容
textHint	false	Boolean型，是否默认文字显示隐藏
hintText	“”	默认提示文字
focusColor	#333	文本框获取焦点时文字颜色
blurColor	#999	文本框失去焦点时文字颜色

不难看出，只要替换boxClass这几个class名为您本身定义的class名就能够了。举个例子，我写了这样的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;}

若是应用在此插件上呢，简单，一个一个替换就能够了，以下js代码：

$("#customTest").mailAutoComplete({
    boxClass: "out_box",
    listClass: "list_box",
    focusClass: "focus_box",
    markCalss: "mark_box",
    autoClass: false
});

记住，autoClass最好设置为false（非必须）。

而后，就会有相似下面的样式表现：

4、其余一些说明

一、此插件为宽度自适应的，也就是当内部文字过长时，外部的div会宽度自动延伸的。在自定义CSS时若是设置了宽度值，则在非IE6浏览器下，宽度自适应失效；
二、无需在样式中为最外部的box设置position属性，或是宽度及高度，这些工做jQuery 插件已经帮你完成，设置了这些属性反而不利于效果的展示；
三、此插件只能使用在单行文本框上，因为未对其余标签类型的元素作限制，因此若是绑定对象不正确，可能会出现一些意想不到的状况；
四、文本框的父标签（或是祖父标签）尽可能避免设置position:relative属性，这可能会形成IE6下z-index错乱的问题，具体参见个人“IE6下z-index犯癫不起做用bug的初步研究”一文；
五、邮箱地址列表能够经过上下键或是鼠标移动进行选择，“单击”或是“回车”可返回您想要输入的邮箱地址。

最后，我在js方面仍是很稚嫩的，代码的层次，可读性以及维护性仍是很欠火候的，因此此插件并非很尽善尽美，只能凑合凑合使用。虽然花了很多时间修复了一些bug，可是潜在的bug在所不免，欢迎指正，我将尽力及时更新。您能够经过评论提出您的宝贵意见，或是去这里进行一些交流。

就这些，我要看球赛了，呵呵哈哈~~

5、更新

#2010-08-18 以前的邮件提示在IE6下效率较低，邮件列表多时有明显的卡的感受，因此，此次对邮件列表显示的方法进行了从新修改。运行显示效率有了很大的提升。
您能够狠狠地点击这里：jquery.mailAutoComplete-3.0.js

相比上一版插件，此次的v3版暂时不支持多input框的邮件提示，也就是只有页面上绑定的第一个元素有邮件的自动的下拉提示。可是，我想这已经知足绝大多数的状况了。之后有时间，我会使其支持多对象绑定。

#2010-09-03 新添加了提示文字自动显示隐藏的功能，以及获取焦点，失去焦点时文字颜色改变的功能。因此，又添加了几个参数，为 textHint，hintText，focusColor，以及blurColor，默认依次为”false”,空字符串, “#333″, “#999″。要启用默认文字提示显隐功能需设置textHint为”true”，同时hintText的文字为input框中默认显示的文字。

您能够狠狠地点击这里：jquery.mailAutoComplete-3.1.js

转自：张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]