Home>

Everyone working on a web project will have a registration module.If it is registered by email,You want to trigger the drop-down box to display the function of each mailbox after you enter @.The following describes a jquery implementation of input mailbox,Email address can be completed automatically,It can also be called a "input prompt" function. For example, when you enter aaa, it automatically becomes [email protected], which effectively improves the humanized experience of the webpage

The widespread use of mailboxes is due to its free,Therefore, many websites will directly use their email address as the account name when registering.

To improve the user experience,Many websites will implement the automatic prompt function for mailbox input.

The effect is shown in the figure:

Core code (requires jquery support):

(function ($) {
  $.fn.mailautocomplete=function (options) {
    var defaults={
      boxclass:"maillistbox", //External box style
      listclass:"maillistdefault", //The default list style
      focusclass:"maillistfocus", //In the list selection style
      markcalss:"maillisthlignt", //Highlight style
      zindex:1,      autoclass:true, //Whether to use the plugin's own 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, //Automatically show and hide text hints
      hinttext:"",      focuscolor:"#333"
      //blurcolor:"#999"
    };
    var settings=$.extend ((}, defaults, options || (});
    //Page loading css style
    if (settings.autoclass&&$("#maillistappendcss"). size () === 0) {
      $("<style 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 plugin
    var z=settings.zindex, newarr=mailarr=settings.mailarr, hint=settings.texthint, text=settings.hinttext, fc=settings.focuscolor, bc=settings.blurcolor;
    //Create mail internal list content
    $.createhtml=function (str, arr, cur) {
      var mailhtml="";
      if ($. isarray (arr)) {
        $.each (arr, function (i, n) {
          if (i === cur) {
            mailhtml +="<div + cf +" "+ i +" "><span + cm +" ">" + str + "</span>@" + arr [i] + "</div>" ;
          } else {
            mailhtml +="<div + cl +" "+ i +" "><span + 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 ();//Get the width and height of the current object (that is, the text box)
      //style initialization
      that.wrap ("<span></span>")
        .before ("<div + i +" "+ cb +" "+ w +" px;_width:"+ w +" px;position:absolute;left:-6000px;top:"+ h +" px;z-index:" + z + ";"<//div&";);
      var x=$("#maillistbox_" + i), livevalue;//list box object
      that.focus (function () {
        //The level of the parent tag
        $(this) .css ("color", fc) .parent (). css ("z-index", z);
        //Show 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 key is up or down
            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 currently an activation list
                $(this) .val ($("#maillist _" + index) .text ());
              }
            } else {
              if (/@/. test (v)) {
                index=-1;
                //Get the value after @
                //s=v.replace (/@.*/, "");
                //Create 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) {
              //Enter
              if (index>-1&&index<newarr.length) {
                //If there is currently an activation 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 event
        //mouse passes
        $(". 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>
<div>Common Email:</div>
<div><input type="text" class="reg_text" id="email" name="email" /></div>
<div></div>
</div>

Called jquery code:

$("#email"). mailautocomplete ({
boxclass:"out_box", //outer box style
listclass:"list_box", //default list style
focusclass:"focus_box", //In the list selection style
markcalss:"mark_box", //Highlight style
autoclass:false,texthint:true //Hide text automatically hide
});

css, everyone modify it to their own hue

<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 plugin is width-adaptive.That is, when the internal text is too long,The outer div will automatically extend its width.If the width value is set when custom css,In non-IE6 browsers,Width adaptive failure

2. There is no need to set the position property or width and height for the outermost box in the style.These work jquery plugins have done it for you,Setting these attributes is not conducive to the display of effects;

3. This plugin can only be used on single-line text boxes.Since there are no restrictions on elements of other tag types,So if the binding object is incorrect,There may be some unexpected situations.

4.Welcome to ask various 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", //outer box style
  listclass:"list_box", //default list style
  focusclass:"focus_box", //In the list selection style
  markcalss:"mark_box", //Highlight style
  autoclass:false,  texthint:true, //Hide text automatically hide
  hinttext:"Please enter your email address"
});
(function ($) {
  $.fn.mailautocomplete=function (options) {
    var defaults={
      boxclass:"maillistbox", //External box style
      listclass:"maillistdefault", //The default list style
      focusclass:"maillistfocus", //In the list selection style
      markcalss:"maillisthlignt", //Highlight style
      zindex:1,      autoclass:true, //Whether to use the plugin's own 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, //Automatically show and hide text hints
      hinttext:"",      focuscolor:"#333",      blurcolor:"#999"
    };
    var settings=$.extend ((}, defaults, options || (});
    //Page loading css style
    if (settings.autoclass&&$("#maillistappendcss"). size () === 0) {
      $("<style 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 plugin
    var z=settings.zindex, newarr=mailarr=settings.mailarr, hint=settings.texthint, text=settings.hinttext, fc=settings.focuscolor, bc=settings.blurcolor;
    //Create mail internal list content
    $.createhtml=function (str, arr, cur) {
      var mailhtml="";
      if ($. isarray (arr)) {
        $.each (arr, function (i, n) {
          if (i === cur) {
            mailhtml +="<div + cf +" "+ i +" "><span + cm +" ">" + str + "&/[email protected];+" + arr [i] + "</div>" ;
          } else {
            mailhtml +="<div + cl +" "+ i +" "><span + 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 ();//Get the width and height of the current object (that is, the text box)
      //style initialization
      that.wrap ("<span></span>")
        .before ("<div + i +" "+ cb +" "+ w +" px;_width:"+ w +" px;position:absolute;left:-6000px;top:"+ h +" px;z-index:" + z + ";"<//div&";);
      var x=$("#maillistbox_" + i), livevalue;//list box object
      that.focus (function () {
        //The level of the parent tag
        $(this) .css ("color", fc) .parent (). css ("z-index", z);
        //Show 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 key is up or down
            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 currently an activation list
                $(this) .val ($("#maillist _" + index) .text ());
              }
            } else {
              if (/@/. test (v)) {
                index=-1;
                //Get the value after @
                //s=v.replace (/@.*/, "");
                //Create 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) {
              //Enter
              if (index>-1&&index<newarr.length) {
                //If there is currently an activation 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 event
        //mouse passes
        $(". 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);
  • Previous oracle 11gR2 win64 installation and configuration tutorial with basic operations
  • Next jQuery simple implementation of colored cloud tag effect example