Automatically fill in the drop-down box and select the sample code Diagram

1. Need a js file: jquery. mailAutoComplete-3.1.js
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. mailAutoComplete = function (options ){
Var defaults = {
BoxClass: "mailListBox", // external box style
ListClass: "mailListDefault", // default list Style
FocusClass: "mailListFocus", // select the style from the list
MarkCalss: "mailListHlignt", // highlight Style
ZIndex: 1,
AutoClass: true, // whether to use the built-in class style of the plug-in
MailArr: ["qq.com", "gmail.com", "126.com"," 163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "live.com", "sohu.com ", "sina.com"], // mail Array
TextHint: false, // Automatic Display and hide of text prompts
HintText :"",
FocusColor: "#333 ",
BlurColor: "#999"
};
Var settings = $. extend ({}, defaults, options || {});

// Page-mounted CSS styles
If (settings. autoClass & $ ("# mailListAppendCss"). size () === 0 ){
$ ('<Style id = "mailListAppendCss" type = "text/css">. mailListBox {border: 1px solid #369; background: # fff; font: 12px/20px Arial ;}. mailListDefault {padding: 0 5px; cursor: pointer; white-space: nowrap ;}. mailListFocus {padding: 0 5px; cursor: pointer; white-space: nowrap; background: #369; color: white ;}. mailListHlignt {color: red ;}. mailListFocus. mailListHlignt {color: # fff ;}</style> '). appendTo ($ ("head "));
}
Var cb = settings. boxClass, cl = settings. listClass, cf = settings. focusClass, cm = settings. markCalss; // class variable of the plug-in
Var z = settings. zIndex, newArr = mailArr = settings. mailArr, hint = settings. textHint, text = settings. hintText, fc = settings. focusColor, bc = settings. blurColor;
// Create an internal email list
$. CreateHtml = function (str, arr, cur ){
Var mailHtml = "";
If ($. isArray (arr )){
$. Each (arr, function (I, n ){
If (I === cur ){
MailHtml + = '<div class = "mailHover' + cf + '" id = "mailList _' + I + '"> <span class = "' + cm + '"> '+ str +' </span> @ '+ arr [I] +' </div> ';
} Else {
MailHtml + = '<div class = "mailHover' + cl + '" id = "mailList _' + I + '"> <span class = "' + cm + '"> '+ str +' </span> @ '+ arr [I] +' </div> ';
}
});
}
Return mailHtml;
};
// Some global variables
Var index =-1, s;
$ (This). each (function (){
Var that = $ (this), I = $ (". justForJs"). size ();
If (I> 0) {// bind only one text box
Return;
}
Var w = that. outerWidth (), h = that. outerHeight (); // obtain the width and height of the current object (that is, the text box)
// Initialize the style
That. wrap ('<span style = "display: inline-block; position: relative;"> </span> ')
. Before ('<div id = "mailListBox _' + I + '" class = "justforjs' + cb +'" style = "min-width: '+ w + 'px; _ width: '+ w + 'px; position: absolute; left:-6000px; top:' + h + 'px; z-index:' + z + '; "> </div> ');
Var x = $ ("# mailListBox _" + I), liveValue; // list object
That. focus (function (){
// Parent tag level
Certificate (this).css ("color", fc0000.parent().css ("z-index", z );
// Display and hide the prompt text
If (hint & text ){
Var focus_v = $. trim ($ (this). val ());
If (focus_v = text ){
$ (This). val ("");
}
}
// Keyboard Events
$ (This). keyup (function (e ){
S = v = $. trim ($ (this). val ());
If (// @/. test (v )){
S = v. replace (/@.*/,"");
}
If (v. length> 0 ){
// If the button is up or down
If (e. keyCode = 38 ){
// Up
If (index <= 0 ){
Index = newArr. length;
}
Index --;
} Else if (e. keyCode = 40 ){
// Downward
If (index> = newArr. length-1 ){
Index =-1;
}
Index ++;
} Else if (e. keyCode = 13 ){
// Press ENTER
If (index>-1 & index <newArr. length ){
// If there is an activation list currently
$ (This). val ($ ("# mailList _" + index). text ());
}
} Else {
If (// @/. test (v )){
Index =-1;
// Obtain the value after @
// S = v. replace (/@.*/,"");
// Create a new matching Array
Var site = v. replace (/.*@/,"");
NewArr = $. map (mailArr, function (n ){
Var reg = new RegExp (site );
If (reg. test (n )){
Return n;
}
});
} Else {
NewArr = mailArr;
}
}
X.html ($. createHtml (s, newArr, index.html .css ("left", 0 );
If (e. keyCode = 13 ){
// Press ENTER
If (index>-1 & index <newArr. length ){
// If there is an activation list currently
X.css ("left", "-6000px ");
}
}
} Else {
X.css ("left", "-6000px ");
}
}). Blur (function (){
If (hint & text ){
Var blur_v = $. trim ($ (this). val ());
If (blur_v = ""){
$ (This). val (text );
}
}
((This).css ("color", bc). unbind ("keyup" ).parent().css ("z-index", 0 );
X.css ("left", "-6000px ");

});
// Move the cursor over the list event
// Move the mouse over
$ (". MailHover"). live ("mouseover", function (){
Index = Number ($ (this). attr ("id"). split ("_") [1]);
LiveValue = $ ("# mailList _" + index). text ();
X. children ("." + cf). removeClass (cf). addClass (cl );
$ (This). addClass (cf). removeClass (cl );
});
});

X. bind ("mousedown", function (){
That. val (liveValue );
});
});
};

}) (JQuery );

2. the jq library is of course necessary. Here is a little bit.

Next we will test

3. style sheet:
Copy codeThe Code is as follows:
<Style type = "text/css">
. Out_box {border: 1px solid # ccc; background: # fff; font: 12px/20px Tahoma ;}
. List_box {border-bottom: 1px solid # eee; padding: 0 5px; cursor: pointer ;}
. Focus_box {background: # f0f3f9 ;}
. Mark_box {color: # c00 ;}
</Style>

4. Test code
Copy codeThe Code is as follows:
<P> Custom class display: <input type = "text" id = "customTest" size = "28"/> </p>

<Script src = "js/jquery-1.6.min.js" type = "text/javascript"> </script>
<Script src = "js/jquery. mailAutoComplete-3.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# CustomTest"). mailAutoComplete ({
BoxClass: "out_box", // external box style
ListClass: "list_box", // default list Style
FocusClass: "focus_box", // select the style from the list
MarkCalss: "mark_box", // highlight Style
AutoClass: false,
TextHint: true, // The prompt text is automatically hidden.
HintText: "Enter the email address"
});
})
</Script>