jquery implementation of the automatic completion of the input mailbox when the full pull tip function _javascript tips

Remember last year to do a project, use the mailbox input automatic prompting function, so the internet search a bit, found that this write well, now in retrospect, reprinted, easy to access.

The wide use of the mailbox benefits from its free, so many sites in the registration will be directly using the mailbox as the account name

In order to improve the user experience, many websites will implement the automatic prompting function of the mailbox input.

The implementation effect is as shown in the figure:

Core code (required for jquery support):

(function ($) {$.fn.mailautocomplete = function (options) {var defaults = {boxclass: ' Maillistbox ',//outer box style ListClass: "Maillistdefault",//default list style Focusclass: "Maillistfocus",///list selected style MARKCALSS: "Maillisthlignt ",///Highlight style zindex:1, autoclass:true,//whether to use the plug-in with its own class style Mailarr: [" qq.com "," gmail.com "," 126.com "," 163.co M "," hotmail.com "," yahoo.com "," yahoo.com.cn "," live.com "," sohu.com "," sina.com "],//mail array texthint:false,//
    Automatic display and concealment of text prompts Hinttext: "", Focuscolor: "#333"//blurcolor: "#999"}; var settings = $.extend ({}, defaults, Options | |
    
    {}); Page load CSS style if (Settings.autoclass && $ ("#mailListAppendCss"). Size () = = 0) {$ (' <style id= "Maillistapp Endcss "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; The class variable of the plug-in is var z = settings.zindex, newArr = Mailarr = Settings.mailarr, hint = settings.texthint, Text = Settings.h
    Inttext, FC = settings.focuscolor, BC = Settings.blurcolor;
      Create a message internal list content $.createhtml = function (str, arr, cur) {var mailhtml = ""; if ($.isarray (arr)) {$.each (arr, function (i, n) {if (i = = cur) {mailhtml = ' <div class= ' m  
          Ailhover ' +cf+ ' "id=" Maillist_ ' +i+ ' "><span class=" ' +cm+ ' "> ' +str+ ' </span>@ ' +arr[i]+ ' </div> '; }else{mailhtml + = ' <div class= mailhover ' +cl+ ' "id=" Maillist_ ' +i+ ' "><span class=" ' +cm+ ' "> ' +s  
          tr+ ' </span>@ ' +arr[i]+ ' </div> ';
      }
        });
    return mailhtml;
    };
Some global variables    var index =-1, s;  
      $ (this). each (function () {var-= $ (this), I = $ (". Justforjs"). Size ();  
      if (i > 0) {//bind only a text box return; var w = that.outerwidth (), H = that.outerheight (); Gets the height//style initialization that.wrap for the current object (that is, the text box) (' <span style= ' display:inline-block;position:relative; ></span> '). Before (' <div id= "Maillistbox_ ' +i+ '" class= "Justforjs ' +cb+ '" style= "min-width: ' +w+ ' Px;_wid Th: ' +w+ ' px;position:absolute;left:-6000px;top: ' +h+ ' px;z-index: ' +z+ ';
      ></div> '); var x = $ ("#mailListBox_" + i), livevalue;  
        List box Object That.focus (function () {//Parent tag level $ (this). CSS ("color", FC). Parent (). CSS ("Z-index", z);
          Hint text display and hide 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) {//Carriage return if (Index >-1 && Index < newarr.length) {  
              If there is currently an active list $ (this). Val ($ ("#mailList_" +index). Text ());
                }}else{if (/@/.test (v)) {index =-1;
                Gets 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)). CSS ("left", 0);
                if (E.keycode = = 13) {//Carriage return if (Index >-1 && Index < newarr.length) {  
              If there is currently an active list 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");  
        });
   Mouse over list item events//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);

HTML Example:

<div class= "Reg_lin1" >
<div class= "lin1_1" > Common mailbox:</div>
<div class= "Lin1_2" >< Input type= "text" class = "reg_text" id = "Email" name = "Email"/></div>
<div class= "Lin1_3" ></div& gt;
</div>

Called jquery code:

$ ("#email"). Mailautocomplete ({
boxclass: "Out_box",//External box style
listclass: "List_box",//default list style
Focusclass: "Focus_box",///list selection style
MARKCALSS: "Mark_box",//Highlight style
Autoclass:false,
texthint:true// Prompt text to automatically hide
});

CSS, which everyone modifies themselves into the tones they want

 <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>

Effect Two:

1, this plug-in for the width of the adaptive, that is, when the internal text is too long, the outside Div will automatically extend the width. If the width value is set when customizing the CSS, the width adaptive invalidation is not in the IE6 browser;
2, need not in the style for the most external box set position properties, or width and height, these work jquery plug-ins have helped you to complete, set these attributes are not conducive to the performance of the show;
3, this plug-in can only be used on a single line of text boxes, because the other label types of elements do not limit, so if the binding object is not correct, there may be some unexpected situation.
4. Welcome to ask questions and bugs in use.
--------------------------------------------
Note: How to use
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",///list selection style
  MARKCALSS: "Mark_box",//Highlight style
  Autoclass:false,
  texthint:true,// Prompt text automatically hides
  hinttext: "Please enter the email address"
});

(function ($) {$.fn.mailautocomplete = function (options) {var defaults = {boxclass: ' Maillistbox ',//outer box style ListClass: "Maillistdefault",//default list style Focusclass: "Maillistfocus",///list selected style MARKCALSS: "Maillisthlignt ",///Highlight style zindex:1, autoclass:true,//whether to use the plug-in with its own class style Mailarr: [" qq.com "," gmail.com "," 126.com "," 163.co M "," hotmail.com "," yahoo.com "," yahoo.com.cn "," live.com "," sohu.com "," sina.com "],//mail array texthint:false,//
    Automatic display and concealment of text prompts Hinttext: "", Focuscolor: "#333", Blurcolor: "#999"}; var settings = $.extend ({}, defaults, Options | |
     
    {}); Page load CSS style if (Settings.autoclass && $ ("#mailListAppendCss"). Size () = = 0) {$ (' <style id= "Maillistapp Endcss "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; The class variable of the plug-in is var z = settings.zindex, newArr = Mailarr = Settings.mailarr, hint = settings.texthint, Text = Settings.h
    Inttext, FC = settings.focuscolor, BC = Settings.blurcolor;
      Create a message internal list content $.createhtml = function (str, arr, cur) {var mailhtml = ""; if ($.isarray (arr)) {$.each (arr, function (i, n) {if (i = = cur) {mailhtml = ' <div class= ' m  
          Ailhover ' +cf+ ' "id=" Maillist_ ' +i+ ' "><span class=" ' +cm+ ' "> ' +str+ ' </span>@ ' +arr[i]+ ' </div> '; }else{mailhtml + = ' <div class= mailhover ' +cl+ ' "id=" Maillist_ ' +i+ ' "><span class=" ' +cm+ ' "> ' +s  
          tr+ ' </span>@ ' +arr[i]+ ' </div> ';
      }
        });
    return mailhtml;
    };
 Some global variables   var index =-1, s; 
      $ (this). each (function () {var-= $ (this), I = $ (". Justforjs"). Size (); 
      if (i > 0) {//bind only a text box return; var w = that.outerwidth (), H = that.outerheight (); Gets the height//style initialization that.wrap for the current object (that is, the text box) (' <span style= ' display:inline-block;position:relative; ></span> '). Before (' <div id= "Maillistbox_ ' +i+ '" class= "Justforjs ' +cb+ '" style= "min-width: ' +w+ ' Px;_wid Th: ' +w+ ' px;position:absolute;left:-6000px;top: ' +h+ ' px;z-index: ' +z+ ';
      ></div> '); var x = $ ("#mailListBox_" + i), livevalue;  
        List box Object That.focus (function () {//Parent tag level $ (this). CSS ("color", FC). Parent (). CSS ("Z-index", z);
          Hint text display and hide 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) {//Carriage return if (Index >-1 && Index < newarr.length) { 
              If there is currently an active list $ (this). Val ($ ("#mailList_" +index). Text ());
                }}else{if (/@/.test (v)) {index =-1;
                Gets 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)). CSS ("left", 0);
                if (E.keycode = = 13) {//Carriage return if (Index >-1 && Index < newarr.length) {  
              If there is currently an active list 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"); 
        }); Mouse over list item events//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);