Development of email input Lenovo plugin based on jquery

JS Code:

/*Create by Code_bunny 20140701 [email protected] Https://github.com/OOP-Code-Bunny*/(function($) {$.fn.autocomplate=function(opts) { This. each (function() {Init.call ( This, opts);        }); return  This;    }; functionInit (opts) {varDefaultoption ={textInput: $ ( This),//Text input BoxEmailbox: $ ( This). Next (),//box for placing a Lenovo mailboxlinks:[' 163.com ', ' qq.com ', ' 126.com ', ' gmail.com ', ' yeah.net ', ' hotmail.com ', ' sina.com ', ' sina.cn ', ' sohu.com ']//Lenovo Content,        }; varOptions =$.extend (Defaultoption, opts); varFunc = {}; Func.init=function(){             This. TimeOut =NULL;  This. cur =NULL;  This. emaillist = [];  This. AUl = $ (' <ul> ');  for(vari=0; i< This. links.length; i++){                varALi = $ (' <li> ');  This. Emaillist.push (ALi);  This. Aul.append (ALi); Ali.bind (' MouseDown ', Func.chooseLi.bind (options)); }             This. Emailbox.append ( This. aUl);  This. Textinput.bind (' KeyDown ', Func.keyDownFun.bind ( This). Bind (' KeyUp ', Func.keyUpFun.bind ( This). Bind (' Blur ', Func.textBlur.bind ( This)); return  This;        }; Func.chooseli=function(e) { This. Textinput.val ($ (e.target). text ());        }; Func.keydownfun=function(e) {Func.clearTO.call ( This); if(e.keycode==13){                returnFunc.pressEnter.call ( This); }            Else if(e.keycode==40) {                returnFunc.upAndDown.apply ( This,[true]); }            Else if(e.keycode==38){                returnFunc.upAndDown.apply ( This,[false]); }             This. TimeOut = SetTimeout (Func.timeout.bind ( This), 0)        }; Func.keyupfun=function(e) {Func.clearTO.call ( This); if(Func.ifNotText.apply ( This, [E.keycode]))return;  This. TimeOut = SetTimeout (Func.timeout.bind ( This), 0)        }; Func.pressenter=function(){            return( This. cur = = =NULL) ? Func.noCurPressEnter.call ( This): Func.curPressEnter.call ( This)        }; Func.nocurpressenter=function(){            return( This. Textinput.val (). indexOf (' @ ') >0 && This. Textinput.val (). indexOf (' @ ') < This. Textinput.val (). length-1)? This. Textinput.blur (): This. Textinput.val ( This. emaillist[0].text ()). blur ();        }; Func.curpressenter=function(){            return  This. Textinput.val ( This. Emailbox.find (' li:visible '). EQ ( This. cur). Text ()). blur ();        }; //The upper and lower key function, the parameter represents up and down, true to the next, false for the upperFunc.upanddown =function(direct) { This. length = This. Emailbox.find (' li:visible '). length; varStart = Direct? 0: This. length-1; if( This. cur = = =NULL) {                 This. cur =start;  This. Emailbox.find (' li:visible '). EQ ( This. cur). addclass (' cur '); }            Else{Func.removeCur.call ( This); varEnd = Direct? Options.length-1:0;  This. cur = This. cur = = end? Start: (direct?) This. Cur+1: This. cur-1);  This. Emailbox.find (' li:visible '). EQ ( This. cur). addclass (' cur ');        }        }; Func.timeout=function(){            return  This. Textinput.val () = = "? This. Emailbox.hide (): Func.match.apply ( This,[ This. Textinput.val ()])        }; Func.ifnottext=function(num) {returnnum = = 13 | | num = = 40 | | num = = 38        }; Func.match=function(content) {Func.removeCur.call ( This). Emailbox.show ();  This. cur =NULL; varCONTENTPRV = Content.split (' @ ') [0]; varContentnext = Content.split (' @ ') [1] | | ‘‘;  for(vari=0; i< This. links.length; i++){                 This. emaillist[i] = This. Links[i].indexof (Contentnext)!=0? This. Emaillist[i].text (contentprv+ ' @ ' + This. links[i]). Hide (): This. Emaillist[i].text (contentprv+ ' @ ' + This. Links[i]). Show ();        }        }; Func.textblur=function() {Func.clearTO.call ( This);  This. cur =NULL; Func.removeCur.call ( This);  This. Emailbox.hide (); return  This        }; Func.removecur=function() {$.each ( This. Emaillist,function(){                $( This). Removeclass (' cur ')            }); return  This        }; Func.clearto=function() {cleartimeout ( This. TimeOut);  This. TimeOut =NULL;        }; Func.bindfocus=function(){             This. Textinput.bind (' KeyDown ', Func.keyDownFun.bind ( This). Bind (' KeyUp ', Func.keyUpFun.bind ( This));        };    Func.init.call (options); }}) (JQuery);

HTML code:

                  <Divclass= "INPT">                    <Div>                      <inputtype= "text"class= "Email text"name= "Email" >                      <Divclass= "Textlist"style= "Display:none">                      </Div>                    </Div>                  </Div>

1. Create Ul,li, insert into Emailbox, and give Li a fixed-point click event (must be a MouseDown event, not a click event) for the Chooseli method. (View →3)

Because the element loses focus when clicked, the blur event of input is triggered, but the Li's click event must occur before the blur event of input, so the MouseDown event

2.

①. Bind the Keydownfun method to the KeyDown event of input. (View →5)

②. Bind the Keyupfun method to the KeyUp event of input. (View →6)

③. Bind the Textblur method to the blur event of input. (View →4)

3. Chooseli method, select Click to fill input (the Blur event of input will also be triggered after clicking)

4. Textblur method, clear timeout, clear cur, delete Li's cur class name, hide Lenovo Box

5. Keydownfun Method:

① Clear Timeout (prevents the input from appearing too quickly)

② If the ENTER key is pressed, call the Pressenter method, return (view →7)

③ if the ' down ' key is pressed, call the Upanddown method and pass in the True,return (view →10)

④ if the ' up ' key is pressed, call the Upanddown method and pass in the False,return (view →10)

⑤ set timeout to 0 seconds after the timeout method to synchronize input and Lenovo content display (view →11)

6. Keyupfun Method:

① Clear Timeout (prevents the input from appearing too quickly)

② calls the Ifnottext method, passing in the E.keycode as a parameter, judging whether the press is ' carriage return, down, on ', if so, direct return

* Still need to determine the input is the text, or ' On, down, enter ', if it is ' up, down, enter ', it can not be directly matched again, because the matching process includes resetting the cur.

③ set Timeout to execute timeout method after 0 seconds (view →11)

* Show Lenovo content to occur at KeyDown and KeyUp (if only one is defined, the input will sometimes be out of sync), and even if it happens two times, there is no problem. But carriage return, up, down, these three key events can only bind KeyDown, because it can only be called once per keystroke.

7. Pressenter Method:

① If no cur item is currently present, call the Nocurpressenter method (view →8)

② Call the Curpressenter method if there are currently cur items (view →9)

* Determine if there are cur entries, cannot use if (cur), or if (!cur), because the value of cur is likely to be 0, is 0 when it will get different results than the desired value

8. Nocurpressenter Method:

Determine if there is an ' @ ' character in the input box, and the @ character is not the last one,

① already has the @ character and is not in the last one, which means that the desired result is entered and the blur event of input is triggered directly.

The ② input does not have an @ character, or there is no content after the @ character, which means that no Full mailbox is entered, the contents of the first Li are populated into input, and the blur event of input is triggered.

9. Curpressenter Method:

Populates the value of the cur item directly into input, and then input loses focus

Upanddown Method:

① defines the number of Li items that are currently displayed for the length property

② Determine whether there is a current cur item, and some will cur go to the next or previous (judging whether it is up or down according to the parameters passed in)

③ cur go to the first or last (judging whether it is up or down according to the parameters passed in)

One. Timeout method:

① if the contents of the input box are empty, hide the Emailbox

② call the match method if the input box content is not empty (view →13)

Ifnottext Method:

Determine if the ' carriage return, down, on ' key, is one of the words, returns True

Match method:

① Emptying cur items

* If you have selected a mailbox through the keyboard, and then enter the content, the original selected items must be emptied. If you do not clear, the newly entered content will cause changes in the filter conditions, resulting in the display of the item also changes, assuming then press ' down ', then the cur change is not the newly filtered display item, is still the original display item, causing the error.

② Let Emailbox show

③ to split the input according to the @ character

④ the content of each Li should be the content of +links in front of the @

⑤ let the content behind @ match the beginning of each links, match the successful display, match the failed hidden

GitHub Address: Https://github.com/OOP-Code-Bunny/ocj-index-v3.0.0/blob/master/common/js/common/jquery.autoComplate.js