method of automatically displaying the list of mailbox suffixes with object-oriented resolution input user name

---restore content starts---

When we sign up or log in to use the mailbox format, the Prompt drop-down box displays the mailbox suffix

Effect

This paper mainly introduces the method of automatic display of the mailbox suffix list by JS input user name, which can realize the function of automatic display of mailbox suffix names.

The principle is: an input box when I enter any Word automatically drop the corresponding mailbox prompt, in the input box input 11 when the drop-down box has 11 of the mailbox input other when there are other copy of the corresponding mailbox.

Similarly, this plug-in does not require any HTML tags, only one input box has the corresponding ID class name OK and the parent has a class name, others do not need. The internal HTML code is automatically generated.

Here is the function code;

This code references the JQ so it is necessary to introduce jq.js first;

<script src= "Http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" ></script>

Put the email suffix we need to prompt into an array;

var emailsorce = ["@sina. com", "@163.com", "@qq. com", "@126.com", "@vip. Sina.com",    "@sina. cn", "@hotmail. com", "@ Gmail.com "," @sohu. com "," @yahoo. cn "," @139.com ",    " @wo. com.cn "," @189.cn "];

Next is the object-oriented content, with comments in the middle;

var email={init:function () {var that=this;            $ ("#email"). focus (function () {if ($ (this). val () = = "") {That.hint (); }else{$ ("#closeuser"). CSS ({"Display": "Block"}),//Clear button Display}}), Bindeven:function        () {this.chose ();        This.delet ();    This.miss (); }, Miss:function () {//Lost focus Delete button hide drop-down option disappears to determine if the mailbox format is $ ("#email"). blur (function () {$ ("#closeuser"). CSS ({"D            Isplay ":" None "});            $ ("#sele"). CSS ({"Display": "None"}); var filter =/^ ([a-za-z0-9_\.\-]) +\@ (([a-za-z0-9\-]) +\.) + ([a-za-z0-9]{2,4}) +$/;//mailbox Regular Expression if (Filter.test ($ ("#email"). Val ())) {//is the mailbox format $ ("#email"). css ({"Bo             Rder ":" 0.1rem Solid #0cbd19 "})}else{//is not a mailbox format $ (" #email "). CSS ({" Border ":" 0.1rem Solid #ff072f "})        })}, Hint:function () {///initial input appears the Mailbox option Dismiss Button appears Var that=this;            $ ("#email"). On ("Input", function () {if ($ (this). val () = "") {if ($ (this). Val (). indexOf ("@") ==-1) {//whether input to @ $ ("#sele"). HTML ("");                    /each input initializes $ ("#sele"). CSS ({"Display": "Block"}); for (Var i=0;i<emailsorce.length;i++) {//Adds the collection's mailbox to the Li var li=$ ("<li>" +$ (This). Val () +emailsorc                        e[i]+ "</li>");                    $ ("#sele"). Append (LI); } $ ("#closeuser"). CSS ({"Display": "Block"});//Dismiss button displays}else{var arr=$                    (this). Val (). Split ("@"); if (arr[1]!= "") {//filter the contents after @ $ ("#sele"). HTML ("");//Initialize each input for (Var I=0;i<ema ilsorce.length;i++) {var temp=emailsorce[i].split (".")                            [0]; if (Temp.indexof (arr[1])!=-1) {//filter option contains input content there is no hidden var li=$ ("<li>" +arr[0]+emailsor                                ce[i]+ "</li>"); $ ("#sele"). Append (LI);                }}}}}else{//Single box no content Remove button hide drop-down option hidden                $ ("#closeuser"). CSS ({"Display": "None"});            $ ("#sele"). CSS ({"Display": "None"}); })}, Chose:function () {$ (document). On ("Touchstart", "#sele li", function () {//Click on the contents of the drop-down box in the Options box            Click the option drop-down box to disappear the Delete button disappears $ ("#email"). Val ($ (this). html ());            $ ("#closeuser"). CSS ({"Display": "None"});        $ ("#sele"). CSS ({"Display": "None"});            })}, Delet:function () {//box content Delete drop-down box hides $ (document). On ("Touchstart", "#closeuser", function () {            Click the Dismiss button event $ ("#email"). Val ("");            $ ("#sele"). CSS ({"Display": "None"});        $ ("#closeuser"). CSS ({"Display": "None"}); })    }}

The following as long as the call is OK;

Email.init (); Email.bindeven ();

　　

Function Analysis: The value of the 1.input input box, when the change, display the hint of the drop-down layer; 　　The value of the 2.input input box changes, the drop-down layer showing the prompt will be automatically added to the "@" according to the input content; 　　When the value of the 3.input input box changes, the drop-down layer showing the hint will be filtered according to the contents of the drop-down layer "@" after the input. 　　4. Click the content in the drop-down layer, the value will be filled into the input box; 　　5. Pressing the mouse key will fill the input box with the contents of the selected drop-down layer. 　　6. Press the "Up" or "down" arrow keys on the keyboard to move through the options in the drop-down layer (circular movement, change the current Li background color); 7. When the mouse hovers over the Li of the drop-down layer, there will be a background color. 　　Second, the function realizes: the value of the 1.input input box, when the event is changed: PropertyChange (IE) or input (standard); 　　2. At the time of PropertyChange event, take the value of its input box, then take its value in front of "@", and assign the value to Li plus the email attribute value of Li in the drop-down layer; 　　　　　 3. When the PropertyChange event occurs, 3.1 takes the value of its input box, and then takes its value after "@", 3.2 and matches the value with the e-mail attribute value of Li in the drop-down layer; It is important to note that the regular literal method cannot be used with variables. 　　　　　　So here's the new way. The regular is the value after taking the input box "@", so the regular is changed. And Li's email attribute value is unchanged 4. Here is an event delegate that binds the click event to document and then, by judging, what is the DOM element that was initially triggered when clicked. 　　　　To decide, 4.1 no hidden drop-down cue layer? 　　4.2 Still need to be the drop-down layer, the selected value, assigned to the input box (this can not be used directly, when the input box loses focus, hide the drop-down cue layer, because it will be with the click of the drop-down layer, the value is filled into the input box, this function has a logical contradiction;) 　　5. Similar to the 4th above; 6. It is important to note that when hovering the current Li index into a global variable, so that you can tell the "up" or "down" button when the starting position;

method of automatically displaying the list of mailbox suffixes with object-oriented resolution input user name