jquery Mailbox Auto-complete code

JScript CodeCopy

(Function ($){$.fn.emailmatch= function (settings){var defaultsettings ={emailtip: "Please enter email address", Aemail: ["163.com", "qq.com", "gmail.com", "126.com", "hotmail.com", "yahoo.co M "," yahoo.com.cn "," live.com "," sohu.com "," sina.com "],//mail array wraplayer:" Body ", ClassName:" Maillis        Tbox ", Emailremember:true, Autocursor:false, Position:" Bottom "//Bottom, left, right };/* Merge default parameters and user-defined parameters */settings = settings?        $.extend (defaultsettings,settings):d efaultsettings; 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 ("div"); $ (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 (');}; Empty the input box prompt content 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;}; Restore input Box prompt content 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 key return; break, case 13:{//Enter enterval (Mailwrap,elem); Hidelist ($ (Mailwrap));} Break Case 38:{//arrow key on Showlist ($ (mailwrap), w,h,t,l); Cursormove (mailwrap,-1);} Break Case 40:{//arrow key under 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 (s Uffix! = "&& settings.emailremember){//filter array 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){//Current Highlight option 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);} Else{showlist ($ (mailwrap), w,h,t,l); Createmaillist (mailwrap,inputval,suffix,suffixarray,arraynum);} } } }); $ (mailwrap). Find ("Li:not ('. First ')"). Live (' mouseover ', function (){$ (this). addclass ("hover"). Siblings (). Removeclass ("hover");}); $ (mailwrap). Find ("Li:not ('. First ')"). Live (' MouseDown ', function (){$ (this). addclass (' current '). Siblings (). Removeclass ("current"); Enterval (Mailwrap,elem); Hidelist ($ (Mailwrap));}); $ (Mailwrap). bind ("Mouseout", function (){$ (Mailwrap). Find ("Li:not ('. First ')"). Removeclass ("hover");}); }); }; function Cursormove (o,n){var cursorlist = $ (o). Find ("Li:not ('. First ')"), K = new number (); for (i=0;i<cursorlist.length;i++){if (Cursorlist[i].classname = = "current"){k = I+n cursorlist[i].classname = "";};} if (k < 0) k = 0; if (k >= cursorlist.length-1) k = cursorlist.length-1; Cursorlist[k].classname = "current"; } function setcaretatend (field){//IE series browser in auto cursor jumps back to document first question var B = document.getElementById (field); if (B.createtextrange){var r = B.createtextrange (); R.movestart (' character ', b.value.length); R.collapse (); R.select ();} } function position (Array,value){//Gets the position of the element in the array for the (var i in array){if (array[i]==value){return i;break;} } }; function Enterval (Owrap,elem){Elem.val ($ (owrap). Find ("Li.current"). Text ());//Get Highlight content to input box}; function Showlist (oelem,w,h,t,l){//Displays the mailbox frame and locates. Oelem.css ({"Display": "Block", "top": H + T, "left": L, "width": w-2}); }; function Hidelist (Oelem){//Show mailbox Framework Oelem.css ({"Display": "None"}); }; function Createmaillist (OWRAP,SVAL,SUFFIX,AEAIL,NK){//Create candidate list if (NK < 0){NK = 0;} if (NK > Aeail.length-1){NK = aeail.length-1;} var maillist = "<li class= ' first ' ><span> Please select mailbox type </span></li>"; var state = true; The user types the suffix to match the status of the candidate suffix for (k=0; k<aeail.length;k++){if (suffix!= ' && aeail[k].indexof (suffix) = = 0){state = false;} NK = parseint (suffix!= ' && State &&!position (aeail,suffix)? 0:nk); if (suffix! = "&& state) {if (NK = = 0)  {maillist + = ' <li class= "current" ><span> ' +sval+ ' </span>@ ' +suffix+ ' </li > '; } else  {maillist + = ' <li><span> ' +sval+ ' </span>@ ' +suffix+ ' </li> ';}} if ($.isarray (aeail )  {$.each (aeail, function (i)  {if (state && suffix! = ')  {if (i = = (nK-1))  {maillist + = ' &L T;li class= "Current" ><span> ' +sval+ ' </span>@ ' +aeail[i]+ ' </li> '; } else  {maillist + = ' <li><span> ' +sval+ ' </span>@ ' +aeail[i]+ ' </li> ';}} else  {if (i = = NK)  {maillist + = ' <li class= "current" ><span> ' +sval+ ' </span>@ ' +aeail[i]+ ' </li> ';} else  {maillist + = ' <li><span> ' +sval+ ' </span>@ ' +aeail[i]+ ' </li> ';}}); } maillist = "<ul>" + maillist + "</ul>"; $ (owrap). HTML (maillist); };}) (JQuery); 
 
 
 
           

HTML CodeCopy

<div class= "F_item" >

     <label class= "I_label" > Email:</label>

     <input type= "text" class= "I_text" id= "Txtloginid" name= "Txtloginid" style= "Color:rgb (153, 153, 153);" >

     <div id= "Txtloginidtip" >

     </div>

</div>

<script>   $ ("#txtLoginID"). Emailmatch ();</script>

jquery Mailbox Auto-complete code