jQuery邮箱自动补全
类别:Web前端 浏览量:2553
时间:2015-3-1 jQuery邮箱自动补全
jQuery邮箱自动补全一、jQuery邮箱自动补全的类似效果
二、实现邮箱自动补全的代码 (jquery.emailmatch.js)
(function($){
$.fn.emailMatch= function(settings){
var defaultSettings = {
emailTip:"请输入邮箱地址",
aEmail: ["163.com", "qq.com", "gmail.com", "126.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "live.com", "sohu.com", "sina.com"], //邮件数组
wrapLayer:"body",
className:"mailListBox",
emailRemember:true,
autoCursor:false,
position:"bottom" // bottom, left , right
};
/* 合并默认参数和用户自定义参数 */
settings = settings ? $.extend(defaultSettings,settings):defaultSettings;
return this.each(function(){
var elem = $(this),t=0,l=0,
w = elem.outerWidth(),
h = elem.outerHeight(),
selectVal = sMail = inputVal = "",arrayNum = 0,
isIndex = -1;
t = elem.position().top;
l = elem.position().left;
var mailWrap = document.createElement("li");
$(mailWrap).attr({"id":elem.attr("id"),"class":settings.className})
$(settings.wrapLayer).append(mailWrap);
if($.trim(elem.val()) == ""){elem.val(settings.emailTip);};
elem.focus(function(){
arrayNum = 0;
if($.trim(elem.val()) == settings.emailTip){elem.val('');}; // 清空 输入框 提示内容
if($.trim(elem.val()) !=""){
inputVal = $.trim(elem.val());
isIndex = inputVal.indexOf("@");
if(isIndex >= 0 ){
sMail = inputVal.substr(isIndex + 1);
inputVal = inputVal.substring(0,isIndex);
if(sMail !=""){
arrayNum = parseInt(!position(settings.aEmail,sMail)?0:position(settings.aEmail,sMail));
}
}
if(settings.autoCursor){
elem.val(inputVal);
if($.browser.msie ){
setCaretAtEnd(elem.attr("id"));
}
}
showList($(mailWrap),w,h,t,l);
createMailList(mailWrap,inputVal,sMail,settings.aEmail,arrayNum);
};
}).blur(function(){
if(elem.val() == ''){
elem.val(settings.emailTip);
hideList($(mailWrap));
return false;
}; // 还原 输入框 提示内容
enterVal(mailWrap,elem);
hideList($(mailWrap));
});
elem.keyup(function(e){
var suffixArray = [], eKey = e && (e.which || e.keyCode);
//console.log(eKey);
switch(eKey){
case 9: // tab 按键
return;
break;
case 13: { // 回车
enterVal(mailWrap,elem);
hideList($(mailWrap));
}break;
case 38:{ // 方向键 上
showList($(mailWrap),w,h,t,l);
cursorMove(mailWrap,-1);
}break;
case 40: {// 方向键 下
showList($(mailWrap),w,h,t,l);
cursorMove(mailWrap,+1);
}break;
default:{
inputVal = $.trim(elem.val());
var keyIndex = inputVal.indexOf("@");
var suffix = "",suffixState = true;
if(keyIndex >= 0){
suffix = inputVal.substr(keyIndex + 1);
inputVal = inputVal.substring(0,keyIndex);
$("#t2").text("BBB" + inputVal);
if(suffix != '' && settings.emailRemember){ // 过滤数组
for (var i = 0; i < settings.aEmail.length; i++) {
if (settings.aEmail[i].indexOf(suffix) == 0) {
suffixArray.push(settings.aEmail[i]);
suffixState = false;
}
}
}
if(suffix != '' && !settings.emailRemember){ // 当前高亮 选项
for (var i = 0; i < settings.aEmail.length; i++) {
if (settings.aEmail[i].indexOf(suffix) == 0) {
arrayNum = i;
suffixState = false;
break;
}
}
}
}
suffixArray = suffixArray.length > 0 ? suffixArray:settings.aEmail;
if(inputVal=="" && suffix == ""){
hideList($(mailWrap));
arrayNum = 0;
createMailList(mailWrap,inputVal,suffix,settings.aEmail,arrayNum);
标签:jquery
您可能感兴趣
- Uncaught TypeError: jQuery.handleError is not a function
- jquery中append和appendto的区别
- jquery filter方法
- jquery实现页面滚动时自动加载内容
- jquery 淡入淡出
- jquery中filter
- jquery实现在光标位置插入内容
- jquery实现微信中长按识别二维码
- jquery使用data缓存数据
- jquery中hasClass()、is()判断是否包含指定的class
- Jquery实现table表格行的添加、删除
- jQuery如何操作下拉框select
- jquery deferred对象
- jQuery中$.each的用法
- jQuery判断对象是否存在
- jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
- 给孩子选购保温杯,注意这4个步骤,比颜值更重要(给孩子选购保温杯)
- 保温好 容量大 颜值高 保温杯你给娃娃买对了吗(保温好容量大颜值高)
- 《道德经》 人生避开骄狂,才能免去祸患(道德经人生避开骄狂)
- 郭麒麟(郭麒麟)
- 古人十句 戒骄 名言,醍醐灌顶,受益匪浅(古人十句戒骄名言)
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)