郵箱輸入自動補全jquery外掛程式碼例項

admin發表於2017-04-01
jQuery

現在相當多的網站在要輸入郵箱的地方有這樣的功能。

那就是當輸入郵箱的時候，會自動補全郵箱的型別，非常的人性化。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  padding:0;
  margin:0;
}
body {
  font-family:"微軟雅黑";
  color:#333;
  font-size:12px;
}
ul{list-style:none;}
input{
  width:180px;
  height:16px;
  line-height:16px;
  margin:100px;
  padding:4px;
  border:1px solid #aaa;
  font-size:12px;
  font-family:"微軟雅黑";
}
.list-mail ul{
  border:1px solid #aaa;
  line-height:24px;
  padding:6px;
}
.list-mail li{
  cursor:pointer;
  padding:2px 3px;
  margin-bottom:2px;
}
.list-mail .name{
  color:#982114;
}
.list-mail .hover{
  background:#fefacf;
}
.list-mail .select{
  background:#dedaae;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function($) {
  $.fn.autoMail = function(options) {
    var autoMail = $(this);
    var _value = '';
    var _index = -1;
    var _width = autoMail.outerWidth();
    var _height = autoMail.outerHeight();
    var _left = autoMail.offset().left;
    var _top = autoMail.offset().top;
    autoMail.defaults = {
        deValue: '請輸入郵箱地址',
        textCls: 'text-gray',
        listCls: 'list-mail',
        listTop: 1,
        mailArr: ["qq.com", "gmail.com", "126.com", "163.com", "sohu.com", "sina.com"]
      }
      //初始化 
    autoMail.init = function() {
        autoMail.vars = $.extend({}, autoMail.defaults, options);
        autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls);
        autoMail.click(function(event) {
          autoMail.select().removeClass(autoMail.vars.textCls);
          if (autoMail.val() != autoMail.vars.deValue) {
            autoMail.add();
            autoMail.order(_value);
            autoMail.list.find('.item').each(function() {
              if ($(this).text() == autoMail.val()) {
                $(this).siblings('.item').removeClass('select');
                $(this).addClass('select');
                return false;
              }
            })
          }
          event.stopPropagation();
        })
        autoMail.blur(function(event) {
            if (autoMail.val() == '' || autoMail.val() == autoMail.vars.deValue) {
              alert(autoMail.val())
              autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls);
            }
          })
          //文字域鍵盤松開事件 
        autoMail.keyup(function(event) {
          if ($(autoMail.list).length == 0) {
            autoMail.add();
          }
          if (autoMail.list.length > 0) {
            var keyCode = event.keyCode;
            //alert(keyCode) 
            switch (keyCode) {
              case 13:
                autoMail.remove();
                autoMail.blur();
                break;
              case 38:
                _index--;
                if (_index < 0) {
                  _index = 0;
                }
                autoMail.keyOperate(_index);
                break;
              case 40:
                _index++;
                if (_index > $('.item', autoMail.list).length - 1) {
                  _index = ('.item', autoMail.list).length - 1
                }
                autoMail.keyOperate(_index);
                break;
              default:
                if (autoMail.val().indexOf('@') < 0) {
                  _value = autoMail.val();
                  autoMail.order(_value);
                }
            }
          }
        })
        $(document).click(function() {
          if ($(autoMail.list).length > 0) {
            autoMail.remove();
            autoMail.blur();
          }
        })
      }
      //建立列表 
    autoMail.create = function() {
        var li = '';
        for (var i = 0; i < autoMail.vars.mailArr.length; i++) {
          li += '<li class="item">' +
            '<span class="style">' +
            '@' + autoMail.vars.mailArr[i] +
            '</span>' + '</li>';
        }
        autoMail.list = $('<div class="' + autoMail.vars.listCls + '"><ul>' + li + '</ul></div>');
        autoMail.list.css({
          'position': 'absolute',
          'left': _left,
          'top': _top + _height + autoMail.vars.listTop,
          'min-width': _width
        })
        autoMail.list.appendTo($('body'));
        //郵箱列表繫結事件 
        autoMail.list.find('.item').click(function(event) {
          autoMail.getVal($(this));
          autoMail.remove();
          event.stopPropagation();
        })
        autoMail.list.find('.item').hover(
          function() {
            $(this).addClass('hover');
          },
          function() {
            $(this).removeClass('hover');
          })
        return autoMail.list;
      }
      //序列化列表 
    autoMail.order = function(_value) {
        $('.name', autoMail.list).remove();
        var name = $('<span class="name">' + _value + '</span>');
        $('.item', autoMail.list).prepend(name);
      }
      //新增列表 
    autoMail.add = function() {
        if (typeof autoMail.list == 'undefined' || autoMail.list.length < 1) autoMail.create();
      }
      //移除列表 
    autoMail.remove = function() {
        if (autoMail.list.length > 0) {
          autoMail.list.remove();
          delete autoMail.list;
        }
      }
      //獲取值 
    autoMail.getVal = function(obj) {
        if ($('.name', obj).text() != '') {
          var selectValue = obj.text();
          autoMail.val(selectValue);
        } else {
          return false;
        }
      }
      //鍵盤操作 
    autoMail.keyOperate = function(_index) {
        $('.item', autoMail.list).eq(_index).addClass('hover').siblings('.item').removeClass('hover');
        autoMail.val($('.item', autoMail.list).eq(_index).text());
      }
      //開始初始話動作... 
    autoMail.init();
  }
})(jQuery)

$(function() {
  $('.automail').autoMail();
}) 
</script>
</head>
<body>
<div class="test"></div>
<input type="text" class="automail" />
</body>
</html>

相關文章