Select sample code from the drop-down box to automatically fill in the box. _ javascript skills

This article mainly introduces the specific implementation of the mailbox drop-down automatic filling selection, need friends can refer to the next 1. Need a js file: jquery. mailAutoComplete-3.1.js

The 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 ){
$ (''). 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 + ='

'+ Str +' @ '+ arr [I] +'

';
} Else {
MailHtml + ='

'+ Str +' @ '+ arr [I] +'

';
}
});
}
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 ('')
. Before ('

');
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:

The Code is as follows:

4. Test code

The Code is as follows:

Custom class display: