jquery CSS Implementation of the Full mailbox automatic _jquery

Today in the company to do an e-commerce website registered members, the user in the E-mail text box when the input, give the hot tip of the commonly used e-mail, to help users choose to improve the experience effect. The following is the implementation of JQUERY+CSS with the mailbox automatic completion, for everyone to reference and learning.

HTML code: emailautocomple.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
 
 

JS Code: Js/emailautocomple.js (the key code to achieve automatic completion)

 Jquery.autocomplete = function (selector) {var ELT = $ (selector);
        var strhtml = ' <div class= ' autocomplete ' id= ' AutoComplete ' > ' + ' <ul class= ' autocomplete_ul ' > ' + ' <li hz= ' @163.com ' ></li> ' + ' <li hz= ' @126.com ' ></li> ' + ' <l I hz= "@139.com" ></li> ' + ' <li hz= "@189.com" ></li> ' + ' <li hz= "@qq. com" &G T;</li> ' + ' <li hz= ' @vip. Sina.com "></li> ' + ' <li hz=" @sina. CN "&GT;&LT;/LI&G t; '      + ' <li hz= ' @sina. com ' ></li> ' + ' <li hz= ' @sohu. com ' ></li> ' + ' <li hz= "@hotmail. com" ></li> ' + ' <li hz= "@gmail. com" ></li> ' + ' <li Hz= "@wo. com.cn" ></li> ' + ' <li hz= ' @21cn.com ' ></li> ' + ' <li hz= ' @aliyun. C Om "></li> ' + ' <li hz=" @yahoo. com "></li>'
  + ' <li hz= ' @foxmail. com ' ></li> ' + ' </ul> ' + ' </div> ';     
  Appends the div to the body $ (' body '). Append (strhtml);
  var Autocomplete,autoli;    
  AutoComplete = $ (' #AutoComplete ');
  Autocomplete.data (' Elt ', ELT);
  Autoli = autocomplete.find (' li ');
    Autoli.mouseover (function () {$ (this). Siblings (). Filter ('. Hover '). Removeclass (' hover ');
  $ (this). addclass (' hover ');
  }). mouseout (function () {$ (this). Removeclass (' hover ');
    }). MouseDown (function () {autocomplete.data (' Elt '). Val ($ (this). Text ()). change ();
  Autocomplete.hide ();
  });
    User name complement + Flip Elt.keyup (function (e) {if (/13|38|40|116/.test (e.keycode) | | this.value== ') {return false;
    var username = This.value;
      if (Username.indexof (' @ ') ==-1) {autocomplete.hide ();
    return false;
      Autoli.each (function () {this.innerhtml = Username.replace (/\@+.*/, ') +$ (this). attr (' Hz ');
       if (this.innerHTML.indexOf (username) >=0) { $ (this). Show ();  
      }else{$ (this). Hide ();
    }). filter ('. Hover '). Removeclass (' hover ');  Autocomplete.show (). css ({left: $ (). Offset (). Left, Top: $ (a). Offset (). Top + $ (this). Outerheight (True)
    -1, Position: ' Absolute ', ZIndex: ' 99999 '};
    if (Autoli.filter (': Visible '). length==0) {autocomplete.hide ();      
    }else{autoli.filter (': Visible '). EQ (0). addclass (' hover '); }). KeyDown (function (e) {if (e.keycode==38) {//Top Autoli.filter ('. Hover '). Prev (). Not ('.
    Autocomplete_title '). addclass (' hover '). Next (). Removeclass (' hover ');
    }else if (e.keycode==40) {//Next Autoli.filter ('. Hover '). Next (). addclass (' hover '). Prev (). Removeclass (' hover ');
    }else if (e.keycode==13) {//Determine autoli.filter ('. Hover '). MouseDown ();
  ). focus (function () {autocomplete.data (' ELT ', $ (this));
  }). blur (function () {autocomplete.hide ();
});

 };

CSS code: CSS/EMAILAUTOCOMPLE.CSS

#AutoComplete {background: #fff; border:1px solid #4190db;d isplay:none;width:150px;}
#AutoComplete ul{list-style-type:none;margin:0;padding:0;}
#AutoComplete li{color: #333; cursor:pointer;font:12px/22px \5b8b\4f53;text-indent:5px;}
#AutoComplete. Hover{background: #6eb6fe; color: #fff;}

Effect Chart:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.