( 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 ) { $ ( '' ).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 += ' '+str+'@'+arr[i]+' '; } else { mailHtml += ' '+str+'@'+arr[i]+' '; } } ); } 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 ( '' ) .before ( ' ' ); 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 );