jquery Mailbox Auto-complete code

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.