jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能

更新時(shí)間：2015年10月04日 10:15:31 投稿：hebedich

大家在做Web項(xiàng)目，都會(huì)有注冊登錄模塊，如果是郵箱注冊，想要在輸入@后觸發(fā)下拉框顯示各個(gè)郵箱的功能。下面介紹一款jQuery實(shí)現(xiàn)輸入郵箱的時(shí)候，可自動(dòng)補(bǔ)全郵箱地址，也可稱為是“輸入提示”的功能，比如輸入aaa時(shí)，自動(dòng)變成aaa@163.com，有效提升網(wǎng)頁的人性化體驗(yàn)

記得去年做某個(gè)項(xiàng)目的時(shí)候，用到了郵箱輸入自動(dòng)提示功能，于是網(wǎng)上搜了一下，發(fā)現(xiàn)了這個(gè)寫得不錯(cuò)，現(xiàn)在回想起來，轉(zhuǎn)載一下，方便查閱。

郵箱的廣泛使用得益于它的免費(fèi)，因此很多網(wǎng)站在注冊的時(shí)候都會(huì)直接使用郵箱作為賬號名

為了提高用戶的體驗(yàn)，很多網(wǎng)站都會(huì)實(shí)現(xiàn)郵箱輸入的自動(dòng)提示功能。

實(shí)現(xiàn)效果如圖所示：

核心代碼（需要jquery的支持）：

(function($){
  $.fn.mailAutoComplete = function(options){
    var defaults = {
      boxClass: "mailListBox", //外部box樣式
      listClass: "mailListDefault", //默認(rèn)的列表樣式
      focusClass: "mailListFocus", //列表選樣式中
      markCalss: "mailListHlignt", //高亮樣式
      zIndex: 1,
      autoClass: true, //是否使用插件自帶class樣式
      mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //郵件數(shù)組
      textHint: false, //文字提示的自動(dòng)顯示與隱藏
      hintText: "",
      focusColor: "#333"
      //blurColor: "#999"
    };
    var settings = $.extend({}, defaults, options || {});
    
    //頁面裝載CSS樣式
    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變量
    var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor;
    //創(chuàng)建郵件內(nèi)部列表內(nèi)容
    $.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;
    };
    //一些全局變量
    var index = -1, s;
    $(this).each(function(){
      var that = $(this), i = $(".justForJs").size();  
      if(i > 0){ //只綁定一個(gè)文本框
         return;  
      }
      var w = that.outerWidth(), h = that.outerHeight(); //獲取當(dāng)前對象（即文本框）的寬高
      //樣式的初始化
      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; //列表框?qū)ο?
      that.focus(function(){
        //父標(biāo)簽的層級
        $(this).css("color", fc).parent().css("z-index", z);  
        //提示文字的顯示與隱藏
        if(hint && text){
          var focus_v = $.trim($(this).val());
          if(focus_v === text){
            $(this).val("");
          }
        }
        //鍵盤事件
        $(this).keyup(function(e){
          s = v = $.trim($(this).val());  
          if(/@/.test(v)){
            s = v.replace(/@.*/, "");
          }
          if(v.length > 0){
            //如果按鍵是上下鍵
            if(e.keyCode === 38){
              //向上
              if(index <= 0){
                index = newArr.length;  
              }
              index--;
            }else if(e.keyCode === 40){
              //向下
              if(index >= newArr.length - 1){
                index = -1;
              }
              index++;
            }else if(e.keyCode === 13){
              //回車
              if(index > -1 && index < newArr.length){
                //如果當(dāng)前有激活列表
                $(this).val($("#mailList_"+index).text());  
              }
            }else{
              if(/@/.test(v)){
                index = -1;
                //獲得@后面的值
                //s = v.replace(/@.*/, "");
                //創(chuàng)建新匹配數(shù)組
                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){
              //回車
              if(index > -1 && index < newArr.length){
                //如果當(dāng)前有激活列表
                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");  
          
        });  
        //鼠標(biāo)經(jīng)過列表項(xiàng)事件
        //鼠標(biāo)經(jīng)過
        $(".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示例：

<div class="reg_lin1">
<div class="lin1_1">常用郵箱：</div>
<div class="lin1_2"><input type="text" class = "reg_text" id = "email" name = "email"/></div>
<div class="lin1_3"></div>
</div>

調(diào)用的jquery代碼：

$("#email").mailAutoComplete({
boxClass: "out_box", //外部box樣式
listClass: "list_box", //默認(rèn)的列表樣式
focusClass: "focus_box", //列表選樣式中
markCalss: "mark_box", //高亮樣式
autoClass: false,
textHint: true //提示文字自動(dòng)隱藏
});

css，這大家自己修改成自己想要的色調(diào)

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

效果二：

1、此插件為寬度自適應(yīng)的，也就是當(dāng)內(nèi)部文字過長時(shí)，外部的div會(huì)寬度自動(dòng)延伸的。在自定義CSS時(shí)如果設(shè)置了寬度值，則在非IE6瀏覽器下，寬度自適應(yīng)失效；
2、無需在樣式中為最外部的box設(shè)置position屬性，或是寬度及高度，這些工作jQuery 插件已經(jīng)幫你完成，設(shè)置了這些屬性反而不利于效果的展現(xiàn)；
3、此插件只能使用在單行文本框上，由于未對其他標(biāo)簽類型的元素做限制，所以如果綁定對象不正確，可能會(huì)出現(xiàn)一些意想不到的情況.
4.歡迎在使用中提出各種問題和bug.
--------------------------------------------
注:使用方法
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;}

JS代碼：

$("#customTest").mailAutoComplete({
  boxClass: "out_box", //外部box樣式
  listClass: "list_box", //默認(rèn)的列表樣式
  focusClass: "focus_box", //列表選樣式中
  markCalss: "mark_box", //高亮樣式
  autoClass: false,
  textHint: true, //提示文字自動(dòng)隱藏
  hintText: "請輸入郵箱地址"
});

(function($){
  $.fn.mailAutoComplete = function(options){
    var defaults = {
      boxClass: "mailListBox", //外部box樣式
      listClass: "mailListDefault", //默認(rèn)的列表樣式
      focusClass: "mailListFocus", //列表選樣式中
      markCalss: "mailListHlignt", //高亮樣式
      zIndex: 1,
      autoClass: true, //是否使用插件自帶class樣式
      mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //郵件數(shù)組
      textHint: false, //文字提示的自動(dòng)顯示與隱藏
      hintText: "",
      focusColor: "#333",
      blurColor: "#999"
    };
    var settings = $.extend({}, defaults, options || {});
     
    //頁面裝載CSS樣式
    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變量
    var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor;
    //創(chuàng)建郵件內(nèi)部列表內(nèi)容
    $.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;
    };
    //一些全局變量
    var index = -1, s;
    $(this).each(function(){
      var that = $(this), i = $(".justForJs").size(); 
      if(i > 0){ //只綁定一個(gè)文本框
        return; 
      }
      var w = that.outerWidth(), h = that.outerHeight(); //獲取當(dāng)前對象（即文本框）的寬高
      //樣式的初始化
      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; //列表框?qū)ο?
      that.focus(function(){
        //父標(biāo)簽的層級
        $(this).css("color", fc).parent().css("z-index", z);  
        //提示文字的顯示與隱藏
        if(hint && text){
          var focus_v = $.trim($(this).val());
          if(focus_v === text){
            $(this).val("");
          }
        }
        //鍵盤事件
        $(this).keyup(function(e){
          s = v = $.trim($(this).val()); 
          if(/@/.test(v)){
            s = v.replace(/@.*/, "");
          }
          if(v.length > 0){
            //如果按鍵是上下鍵
            if(e.keyCode === 38){
              //向上
              if(index <= 0){
                index = newArr.length; 
              }
              index--;
            }else if(e.keyCode === 40){
              //向下
              if(index >= newArr.length - 1){
                index = -1;
              }
              index++;
            }else if(e.keyCode === 13){
              //回車
              if(index > -1 && index < newArr.length){
                //如果當(dāng)前有激活列表
                $(this).val($("#mailList_"+index).text()); 
              }
            }else{
              if(/@/.test(v)){
                index = -1;
                //獲得@后面的值
                //s = v.replace(/@.*/, "");
                //創(chuàng)建新匹配數(shù)組
                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){
              //回車
              if(index > -1 && index < newArr.length){
                //如果當(dāng)前有激活列表
                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");  
           
        }); 
        //鼠標(biāo)經(jīng)過列表項(xiàng)事件
        //鼠標(biāo)經(jīng)過
        $(".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);

您可能感興趣的文章: