Jquery implements the auto-completion drop-down prompt function when entering the mailbox _ javascript skills

When you are working on a Web project, there will be a login registration module. If you are registering an email, you want to trigger the drop-down box to display the functions of each mailbox after entering. The following introduces a jQuery implementation input mailbox, can automatically complete the mailbox address, also known as "input prompt" function, such as input aaa, automatically become a aaa@163.com, to effectively improve the user-friendly experience of the web page, I remember that when I was working on a project last year, I used the email input auto-Prompt function. So I searched the internet and found that this was well written. Now I think back to it, reprinted for convenience.

Email is widely used because it is free of charge. Therefore, many websites directly use email as the account name during registration.

To improve the user experience, many websites will implement the automatic prompt function of email input.

Effect:

Core code (supported by jquery ):

(Function ($) {$. fn. mailAutoComplete = function (options) {var defaults = {boxClass: "mailListBox", // external box style listClass: "mailListDefault", // default list style focusClass: "mailListFocus ", // markCalss: "mailListHlignt" in the selected style in the list, // highlight style zIndex: 1, autoClass: true, // whether to use the built-in class style 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 hiding of text prompts hintText: "", focusColor: "#333" // blurColor: "#999 "}; var settings = $. extend ({}, defaults, options ||{}); // loads the CSS style if (settings. autoClass & $ ("# mailListAppendCss "). size () = 0) {$ (''). AppendTo ($ ("head");} var cb = settings. boxClass, cl = settings. listClass, cf = settings. focusClass, cm = settings. markCalss; // The class variable var z = settings of the plug-in. 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 (); // get 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 box object that. focus (function () {// hierarchy of parent labels (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 event $ (this ). keyup (function (e) {s = v = $. trim ($ (this ). val (); if (/@/. test (v) {s = v. replace (/@. */, "");} if (v. length> 0) {// if the key is the up or down key if (e. keyCode = 38) {// up if (index <= 0) {index = newArr. length;} index --;} else if (e. keyCode = 40) {// down if (index> = newArr. length-1) {index =-1;} index ++;} else if (e. keyCode = 13) {// 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) {// enter if (index>-1 & index <newArr. length) {// if the list of currently activated 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" cmd.parent(cmd.css ("z-index", 0); x.css ("left", "-6000px ");}); // move the cursor over the list items event // move the cursor 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 );

Html example:

Frequently Used Email:

The called jquery code:

$ ("# Email "). mailAutoComplete ({boxClass: "out_box", // external box style listClass: "list_box", // default list style focusClass: "focus_box", // markCalss in the list selected style: "mark_box", // autoClass: false, textHint: true // indicates that the text is automatically hidden });

Css. You can change it to the color you want.

Result 2:

1. This plug-in is adaptive to width, that is, when the internal text is too long, the external p will automatically extend the width. If the width value is set during custom CSS, the adaptive width will not expire in non-IE6 browsers;
2. You do not need to set the position attribute or width or height for the most external box in the style. The jQuery plug-in has already helped you complete the work. setting these attributes is not conducive to the display of the effect;
3. This plug-in can only be used in single-line text boxes. Because no restrictions are imposed on elements of other label types, unexpected conditions may occur if the bound object is incorrect.
4. You are welcome to raise various questions and bugs during use.
--------------------------------------------
Note: Usage
CSS code:

.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;}

JS Code:

$ ("# CustomTest "). mailAutoComplete ({boxClass: "out_box", // external box style listClass: "list_box", // default list style focusClass: "focus_box", // markCalss in the list selected style: "mark_box", // autoClass: false, textHint: true, // The hintText is automatically hidden in the prompt text: "Enter the email address "});

(Function ($) {$. fn. mailAutoComplete = function (options) {var defaults = {boxClass: "mailListBox", // external box style listClass: "mailListDefault", // default list style focusClass: "mailListFocus ", // markCalss: "mailListHlignt" in the selected style in the list, // highlight style zIndex: 1, autoClass: true, // whether to use the built-in class style 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 hiding of text prompts hintText: "", focusColor: "#333", blurColor: "#999 "}; var settings = $. extend ({}, defaults, options ||{}); // loads the CSS style if (settings. autoClass & $ ("# mailListAppendCss "). size () = 0) {$ (''). AppendTo ($ ("head");} var cb = settings. boxClass, cl = settings. listClass, cf = settings. focusClass, cm = settings. markCalss; // The class variable var z = settings of the plug-in. 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 (); // get 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 box object that. focus (function () {// hierarchy of parent labels (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 event $ (this ). keyup (function (e) {s = v = $. trim ($ (this ). val (); if (/@/. test (v) {s = v. replace (/@. */, "");} if (v. length> 0) {// if the key is the up or down key if (e. keyCode = 38) {// up if (index <= 0) {index = newArr. length;} index --;} else if (e. keyCode = 40) {// down if (index> = newArr. length-1) {index =-1;} index ++;} else if (e. keyCode = 13) {// 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) {// enter if (index>-1 & index <newArr. length) {// if the list of currently activated 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" cmd.parent(cmd.css ("z-index", 0); x.css ("left", "-6000px ");}); // move the cursor over the list items event // move the cursor 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 );