The jquery plug-in is automatically prompted after the Sina mail is input.

A mailbox prompt control will automatically prompt you for the preset mailbox!

/**
/**
* Automatically prompt plug-in for email input
* Author Newton
* $ ('Id'). mailtip ({
* Mails: [], list of mailboxes to be prompted
* Afterselect: function () {}, callback after selection
* Width: NULL indicates the width of the prompt box. If the value is input, it is equal to the width of the text box.
* Offsettop: 0, relative to the default upward offset
* Offsetleft: 0, relative to the default upward offset
* Zindex: 1000 z-index value
*});
* CSS style
* Ul. mailtip {float: none; Background-color: # fcfeff; List-style: none; Border: 1px solid #97 BCCC; border-radius: 0px 0px 10px; overflow: hidden; border-top: none ;}
* Ul. mailtip li p {Line-Height: 30px; cursor: pointer; margin: 0 9px; overflow: hidden; Word-wrap: Break-word; Height: 30px ;}
* Ul. mailtip Li: Last-child {border-radius: 0px 0px 10px ;}
* Ul. mailtip Li. Active {Background: # eaeaea ;}
* Ul. mailtip Li. Hover {Background: # e7f6ff ;}
*/
(Function ($ ){
// Create a prompt list item
VaR createlists = function (value, mails ){
VaR lists = '';
VaR hasat = // @/. Test (value );
If (hasat ){
VaR arr = value. Split ('@');
If (ARR. length> 2) return lists;
Value = arr [0];
VaR regx = new Regexp ('^ @' + arr [1]. replace (/\/, '\') + '\ s *', 'I ');
}

Value = hasat? Value. Split ('@') [0]: value;

For (VAR I = 0, Len = mails. length; I <Len; I ++ ){
If (hasat &&! Regx. Test (mails [I]) continue;
Lists + = '<li Title = "' + value + mails [I] + '" style = "margin: 0; padding: 0; float: none; "> <p> '+ value + mails [I] +' </P> </LI> ';
}

Return lists. Replace (/^ <li ([^>] *)>/, '<li $1 class = "active"> ');
};

// Change the list activation status
VaR changeactive = function (panle, UP ){
// If the prompt box hides and jumps out
If (panle.css ('display') = 'None') return;
VaR liactive = panle. Find ('Li. active ');
If (up ){
VaR liprev = liactive. Prev ();
Liprev = liprev. length? Liprev: panle. Find ('li: la ');
Liactive. removeclass ('active ');
Liprev. addclass ('active ');
} Else {
VaR linext = liactive. Next ();
Linext = linext. length? Linext: panle. Find ('li: First ');
Liactive. removeclass ('active ');
Linext. addclass ('active ');
}
};

// Display the hidden prompt
VaR toggletip = function (Val, panle, mails ){
// If the input is blank, it contains spaces, Chinese characters, English commas (,) and @, or two or more @ directly hide the prompt.
If (! Val |/[,] | [\ u4e00-\ u9fa5] | \ s | ^ @/. test (VAL) | Val. split ('@'). length> 2 ){
Panle. Hide ();
} Else {
VaR lists = createlists (Val, mails );
// If the returned list items are displayed, otherwise they are hidden.
If (lists ){
Panle.html (lists). Show ();
} Else {
Panle. Hide ();
}
}
};

// Call the interface
$. FN. mailtip = function (config ){
VaR defaults = {
Mails: ['@ QQ.com', '@ 163.com', '@ Sina.com', '@ gmail.com', '@ 126.com', '@ 139.com', '@ 189.com ', '@ sohu.com', '@ msn.com', '@ hotmail.com', '@ Yahoo.com', '@ yahoo.com.cn'],
Afterselect: $. Noop,
Width: NULL,
Offsettop: 0,
Offsetleft: 0,
Zindex: 1000
};

Config = $. Extend ({}, defaults, config );
Config. afterselect = typeof config. afterselect = 'function '? Config. afterselect: defaults. afterselect;
Config. width = typeof config. width = 'number '? Config. Width: defaults. width;
Config. offsettop = typeof config. offsettop = 'number '? Config. offsettop: defaults. offsettop;
Config. offsetleft = typeof config. offsetleft = 'number '? Config. offsetleft: defaults. offsetleft;

Return this. Each (function (){
VaR mailinput = $ (this );
VaR parentpanle = mailinput. Parent ();
// If the outer control is not positioned, set relative positioning for the outer control.
! /Absolute | relative/I .test(parentpanle.css ('position') & parentpanle.css ('position', 'relative ');
// Disable auto-completion
Mailinput. ATTR ('autocomplete', 'off ');

// Bind a keyup event
Mailinput. BIND ('keyup ',
Function (e ){
VaR target = $ (this );
VaR listpanle = NULL;
VaR keycode = E. keycode;

// The list is generated only when the first button is clicked.
If (! Target. Data ('data-mailtip ')){
VaR offset = mailinput. offset ();
VaR parentoffset = parentpanle. offset ();

Listpanle = $ ('<ul class = "mailtip" style = "display: none; float: none; position: absolute; margin: 0; padding: 0; Z-index: '+ config. zindex + '"> </ul> ');

// Put the DOM tree
Mailinput. After (listpanle );

Listpanle.css ({
Top: Offset. Top-parentoffset. Top + mailinput. outerheight () + config. offsettop,
Left: Offset. Left-parentoffset. Left + config. offsetleft,
Width: config. Width | mailinput. outerwidth ()-listpanle. outerwidth () + listpanle. Width ()
});

// Bind a mouse event
Listpanle. Delegate ('lil', 'mouseenter mouseleave click', function (e ){
Switch (E. Type ){
Case 'mouseenter ':
$ (This). addclass ('hover ');
Break;
Case 'click ':
VaR text = $ (this). ATTR ('title ');
Mailinput. Val (text). Focus ();
Config. afterselect. Call (this, text );
Break;
Case 'mouseleave ':
$ (This). removeclass ('hover ');
Break;
Default:
Break;
}
});

// Click other places to close the prompt box
$ (Document). BIND ('click', function (e ){
If (e.tar get = mailinput [0]) return;
Listpanle. Hide ();
});

Target. Data ('data-mailtip ', listpanle );
}

// Obtain the prompt box
Listpanle = target. Data ('data-mailtip ');
// Obtain the text box content
Var val = target. Val ();
// Process Based on Different buttons
Switch (keycode ){
// Tab key
Case 9:
Break;
// Enter the Enter key
Case 13:
Break;
// Up key
Case 38:
Break;
// Down key
Case 40:
Break;
// Default
Default:
Toggletip (Val, listpanle, config. mails );
Break;
}
}). BIND ('keylow', function (e ){
VaR listpanle = $ (this). Data ('data-mailtip ');
// If the prompt box does not exist
If (! Listpanle) return;
// Perform different operations based on the buttons
Switch (E. keycode ){
// Up key
Case 38:
Changeactive (listpanle, true );
Break;
// Down key
Case 40:
Changeactive (listpanle );
Break;
// Enter the Enter key
Case 13:
// If the prompt box hides and jumps out
If (listpanle.css ('display') = 'None') return;
E. preventdefault ();
VaR text = listpanle. Find ('Li. active'). ATTR ('title ');
Mailinput. Val (text). Focus ();
Listpanle. Hide ();
Config. afterselect. Call (this, text );
Break;
Default:
Break;
}
});
});
};
}) (Jquery );

I will not write more about the specific usage, but I would like to explain the parameters in detail in the annotations. The dependent CSS controls the display effect. Please put it in the CSS of your website. You can also customize the display effect! (The Color of the highlighted control is messy !) The following is a preview:

Update:
Fixed a bug on to optimize the user experience.
Add the custom width of the prompt box.

Address: http://www.qianduanzu.com/201203277-2.html