JQuery-based drop-down prompt layer of input box (Auto mailbox suffix)

Code SectionCopy codeThe Code is as follows: // JavaScript Document
(Function ($ ){
$. Fn. extend ({
"ChangeTips": function (value ){
Value = $. extend ({
DivTip :""
}, Value)
Var $ this = $ (this );
Var indexLi = 0;
// Click "document" to hide the drop-down list
$ (Document). click (function (event ){
If(condition (event.tar get). attr ("class") = value. divTip | condition (event.tar get). is ("li ")){
Var liVal = values (event.tar get). text ();
$ This. val (liVal );
Blus ();
} Else {
Blus ();
}
})
// Hide the drop-down Layer
Function blus (){
$ (Value. divTip). hide ();
}
// Functions executed on and off the keyboard
Function keychang (up ){
If (up = "up "){
If (indexLi = 1 ){
IndexLi = $ (value. divTip). children (). length-1;
} Else {
IndexLi --;
}
} Else {
If (indexLi = $ (value. divTip). children (). length-1 ){
IndexLi = 1;
} Else {
IndexLi ++;
}
}
$ (Value. divTip). children (). eq (indexLi). addClass ("active"). siblings (). removeClass ();
}
// When the value changes
Function valChange (){
Var tex = $ this. val (); // value of the input box
Var fronts = ""; // stores strings that contain "@"
Var af = /@/;
Var regMail = new RegExp (tex. substring (tex. indexOf ("@"); // There is a string after "@". Note that the regular literal method cannot use variables. So here we use the new method.
// Display the prompt layer and traverse the LI in it
If ($ this. val () = ""){
Blus ();
} Else {
$ (Value. divTip ).
Show ().
Children ().
Each (function (index ){
Var valAttr = $ (this). attr ("email ");
If (index = 1) {$ (this). text (tex). addClass ("active"). siblings (). removeClass ();}
// Process the LI element whose index value is greater than 1
If (index> 1 ){
// When the input value is @
If (af. test (tex )){
// If "@" is contained, the string before the input box is truncated.
Fronts = tex. substring (tex. indexOf ("@"), 0 );
$ (This). text (fronts + valAttr );
// Determine whether the input value "@" contains the email attribute of LI.
If (regMail. test ($ (this). attr ("email "))){
$ (This). show ();
} Else {
If (index> 1 ){
$ (This). hide ();
}
}
}
// When the input value does not contain "@"
Else {
$ (This). text (tex + valAttr );
}
}
})
}
}
// Execute the function when the input box value changes. The event here is used to determine the browser compatibility;
If ($. browser. msie ){
$ (This). bind ("propertychange", function (){
ValChange ();
})
} Else {
$ (This). bind ("input", function (){
ValChange ();
})
}
// Click and hover LI
$ (Value. divTip). children ().
Hover (function (){
IndexLi = $ (this). index (); // obtain the LI index value when the cursor is hovering over the current mouse;
If ($ (this). index ()! = 0 ){
$ (This). addClass ("active"). siblings (). removeClass ();
}
})
// Press the keyboard to move the LI background color up or down
$ This. keydown (function (event ){
If (event. which = 38) {// up
Keychang ("up ")
} Else if (event. which = 40) {// downward
Keychang ()
} Else if (event. which = 13) {// press ENTER
Var liVal = $ (value. divTip). children (). eq (indexLi). text ();
$ This. val (liVal );
Blus ();
}
})
}
})
}) (JQuery)

I. Function Analysis:
1. The value of the input box. When the value changes, the drop-down layer of the prompt is displayed;
2. The value of the input box. When the value changes, the drop-down layer of the prompt will be automatically added to the front of "@" based on the input content;
3. The value of the input box. When the value changes, the drop-down layer of the prompt is displayed. The content after the drop-down layer "@" is filtered based on the input content;
4. Click the prompt content in the drop-down list to fill the value in the input box;
5. Press the Enter key to fill the content in the drop-down list to the input box;
6. Press the arrow keys "up" or "down" on the keyboard to move in the options of the drop-down layer (move cyclically to change the background color of the current LI );
7. When you move the cursor over the LI on the drop-down layer, a background color is displayed.
Ii. function implementation:
1. Value of the input box. The event is propertychange (IE) or input (standard );
2. When a propertychange event occurs, take the value in the input box, take the value before "@", and assign the value to the LI in the drop-down layer with the e-mail attribute value of LI;
3. When the propertychange event occurs,
3.1 take the value of the input box, and then take the value following its,
3.2. Then, match the value with the email attribute value of LI in the drop-down layer in a regular expression;
Note that the regular literal method cannot use variables. So here we use the new method.
Here, the regular expression is the value after the input box "@", so the regular expression is changed. The EMAIL attribute value of LI remains unchanged.
4. Here we use an event Delegate method to bind the click event to the document, and then determine what the DOM element is initially triggered when you click it. To decide,
4.1 do you want to hide the drop-down prompt layer?
4.2 you still need to assign the drop-down layer and selected value to the input box
(This function cannot be used directly. When the input box loses focus, the drop-down prompt layer is hidden because the drop-down prompt layer and click drop-down layer fill in the value in the input box. This function has a logical conflict ;)
5. Similar to the above 4th;
6. it is important to note that when you hover the mouse, you can store the current LI index into a global variable, so that you can tell the starting position when the "up" or "down" button is clicked;
7. Traverse LI and bind them with a handler to change their current background color;
Thanks to the video provided by "Wonderful classroom"
Online Demo http://demo.jb51.net/js/2012/myinputMail/
Package and download myinputMail_jb51.rar