js输入框邮箱自动提示功能代码实现

同理此插件不需要任何html标签，只需要一个输入框有相对应的class类名就ok 且父级有个class类名，其他的都不需要。内部的HTML代码都是自动生成的。

HTML代码如下：

复制代码代码如下:
<div class="parentCls">
<input type="text" class="inputElem">
</div>

其实上面的div标签都可以不需要只需要在input输入框且父级元素添加一个如上class（自定义也可以，只是在JS初始化的时候要传入class就ok 我默认情况下父级class叫parentCls,当前输入框class叫inputElem,隐藏域的class叫hiddenCls，在初始化的时候直接初始化传入空对象即可！）。因为页面上可能有多个输入框所以需要一个父级class 来区分是那个输入框，当然要个隐藏域存值给开发后台。

其中在配置项里面有个邮箱数组参数 mailArr : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"] 。就是要告诉我们默认邮箱有这么多，不管我输入什么下拉框初始化时候有这么多邮箱提示，当我精确到某一项的时候在给个提示精确到某一项下拉。当然由于需求的变更邮箱这个参数可以自己初始化时候自己根据需求配置。

代码风格还是和以前一样。

实现的功能如下：

1. 支持键盘上下移键盘操作，支持鼠标点击及按回车操作。

2. 点击document时候除当前input输入框之外下拉框隐藏。当接着输入时候实现自动匹配等等操作。

具体不多说就是类似于网上注册时候邮箱自动提示功能一样，如果有任何bug的话可以给我留言，时间也不早了不罗嗦了！直接贴代码：

CSS代码如下：

复制代码代码如下:
<style>
   *{margin:0;padding:0;}
   ul,li{list-style:none;}
   .inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
   .parentCls{width:200px;}
   .auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
   .auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
   .red{color:red;}
   .hidden {display:none;}
</style>

JS代码如下：

复制代码代码如下:
/**
* 邮箱自动提示插件
* @constructor EmailAutoComplete
* @ options {object} 可配置项
*/

function EmailAutoComplete（options） {

    this.config = {
        targetCls      : ".inputElem",       // 目标input元素
        parentCls      : ".parentCls",       // 当前input元素的父级类
        hiddenCls      : ".hiddenCls",       // 当前input隐藏域
        searchForm     : ".jqtransformdone", //form表单
        hoverBg        : "hoverBg",          // 鼠标移上去的背景
        inputValColor : "red",              // 输入框输入提示颜色
        mailArr        : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //邮箱数组
        isSelectHide   : true,                // 点击下拉框是否隐藏默认为true
        callback       : null                 // 点击某一项回调函数
    };
    this.cache = {
        onlyFlag            : true,     // 只渲染一次
        currentIndex        : -1,
        oldIndex            : -1
    };

    this.init（options）;
}

EmailAutoComplete.prototype = {

constructor: EmailAutoComplete,

init: function（options）{
this.config = $.extend（this.config,options || {}）;

        var self = this,
            _config = self.config,
            _cache = self.cache;

        $（_config.targetCls）.each（function（index,item）{

            $（item）.keyup（function（e）{
                var target = e.target,
                    targetVal = $.trim（$（this）.val（））,
                    keycode = e.keyCode,
                    elemHeight = $（this）.outerHeight（）,
                    elemWidth = $（this）.outerWidth（）,
                    parentNode = $（this）.closest（_config.parentCls）;

                $（parentNode）.css（{"position":"relative"}）;
                // 如果输入框值为空的话那么下拉框隐藏
                if（targetVal == ""） {
                    $（item）.attr（{"data-html":""}）;
                    // 给隐藏域赋值
                    $（_config.hiddenCls,parentNode）.val（""）;

                    _cache.currentIndex = -1;
                    _cache.oldIndex = -1;
                    $（".auto-tip",parentNode） && ！$（".auto-tip",parentNode）.hasClass（"hidden"） && $（".auto-tip",parentNode）.addClass（"hidden"）;
                    self._removeBg（parentNode）;
                }else {

                    $（item）.attr（{"data-html":targetVal}）;

                    // 给隐藏域赋值
                    $（_config.hiddenCls,parentNode）.val（targetVal）;

                    $（".auto-tip",parentNode） && $（".auto-tip",parentNode）.hasClass（"hidden"） && $（".auto-tip",parentNode）.removeClass（"hidden"）;
                    // 渲染下拉框内容
                    self._renderHTML（{keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode}）;
                }


            }）;
        }）;

       // 阻止form表单默认enter键提交
       $（_config.searchForm）.each（function（index,item） {
            $（item）.keydown（function（e）{
                 var keyCode = e.keyCode;
                 if（keyCode == 13） {
                     return false;
                 }
            }）;
       }）;

       // 点击文档document时候下拉框隐藏掉
       $（document）.click（function（e）{
          e.stopPropagation（）;
          var target = e.target,
              tagCls = _config.targetCls.replace（/^./,""）;

          if（！$（target）.hasClass（tagCls）） {
             $（".auto-tip"） && $（".auto-tip"）.each（function（index,item）{
                 ！$（item）.hasClass（"hidden"） && $（item）.addClass（"hidden"）;
             }）;
          }
       }）;
    },
    /*
     * 渲染下拉框提示内容
     * @param cfg{object}
     */
    _renderHTML: function（cfg） {
        var self = this,
            _config = self.config,
            _cache = self.cache,
            curVal;
        var curIndex = self._keyCode（cfg.keycode）;

        $（".auto-tip",cfg.parentNode）.hasClass（"hidden"） && $（".auto-tip",cfg.parentNode）.removeClass（"hidden"）;
        if（curIndex > -1）{
            // 键盘上下操作
            self._keyUpAndDown（cfg.targetVal,cfg.e,cfg.parentNode）;
        }else {
            if（/@/.test（cfg.targetVal）） {
                curVal = cfg.targetVal.replace（/@.*/,""）;
            }else {
                curVal = cfg.targetVal;
            }
            if（_cache.onlyFlag） {
                $（cfg.parentNode）.append（"<input type="hidden" class="hiddenCls"/>"）;
                var wrap = "<ul class="auto-tip">";

for（var i = 0; i < _config.mailArr.length; i++） {

                    wrap += "<li class="p-index"+i+"">"+"<span class="output-num"></span><em class="em" data-html=""+_config.mailArr[i]+"">"+_config.mailArr[i]+"</em></li>";
                }
                wrap += "</ul>";
                _cache.onlyFlag = false;
                $（cfg.parentNode）.append（wrap）;
                $（".auto-tip",cfg.parentNode）.css（{"position":"absolute","top":cfg.height,"width":cfg.width - 2 + "px","left":0,
                    "border":"1px solid #ccc","z-index":10000}）;
            }

            // 给所有li添加属性 data-html
            $（".auto-tip li",cfg.parentNode）.each（function（index,item）{
                $（".output-num",item）.html（curVal）;
                ！$（".output-num",item）.hasClass（_config.inputValColor） &&
                $（".output-num",item）.addClass（_config.inputValColor）;
                var emVal = $.trim（$（".em",item）.attr（"data-html"））;
                $（item）.attr（{"data-html":curVal + "" +emVal}）;
            }）;

// 精确匹配内容
self._accurateMate（{target:cfg.target,parentNode:cfg.parentNode}）;

            // 鼠标移到某一项li上面时候
            self._itemHover（cfg.parentNode）;

            // 点击对应的项时
            self._executeClick（cfg.parentNode）;
        }

    },
    /**
     * 精确匹配某项内容
     */
    _accurateMate: function（cfg） {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        var curVal = $.trim（$（cfg.target,cfg.parentNode）.attr（"data-html"））,
            newArrs = [];
        if（/@/.test（curVal）） {

            // 获得@ 前面后面的值
            var prefix = curVal.replace（/@.*/, ""）,
                suffix = curVal.replace（/.*@/, ""）;

            $.map（_config.mailArr,function（n）{
                var reg = new RegExp（suffix）;
                if（reg.test（n）） {
                    newArrs.push（n）;
                }
            }）;
            if（newArrs.length > 0） {
                $（".auto-tip",cfg.parentNode）.html（""）;
                $（".auto-tip",cfg.parentNode） && $（".auto-tip",cfg.parentNode）.hasClass（"hidden"） &&
                $（".auto-tip",cfg.parentNode）.removeClass（"hidden"）;

                var html = "";
                for（var j = 0, jlen = newArrs.length; j < jlen; j++） {
                    html += "<li class="p-index"+j+"">"+"<span class="output-num"></span><em class="em" data-html=""+newArrs[j]+"">"+newArrs[j]+"</em></li>";
                }
                $（".auto-tip",cfg.parentNode）.html（html）;

                // 给所有li添加属性 data-html
                $（".auto-tip li",cfg.parentNode）.each（function（index,item）{
                    $（".output-num",item）.html（prefix）;
                    ！$（".output-num",item）.hasClass（_config.inputValColor） &&
                    $（".output-num",item）.addClass（_config.inputValColor）;

                    var emVal = $.trim（$（".em",item）.attr（"data-html"））;

                    $（item）.attr（"data-html",""）;
                    $（item）.attr（{"data-html":prefix + "" +emVal}）;
                }）;

                // 精确匹配到某项时候让当前的索引等于初始值
                _cache.currentIndex = -1;
                _cache.oldIndex = -1;

                $（".auto-tip .output-num",cfg.parentNode）.html（prefix）;

// 鼠标移到某一项li上面时候
self._itemHover（cfg.parentNode）;

                // 点击对应的项时
                self._executeClick（cfg.parentNode）;
            }else {
                $（".auto-tip",cfg.parentNode） && ！$（".auto-tip",cfg.parentNode）.hasClass（"hidden"） &&
                $（".auto-tip",cfg.parentNode）.addClass（"hidden"）;
                $（".auto-tip",cfg.parentNode）.html（""）;
            }
        }
    },
    /*
     * 鼠标移到某一项li上时
     */
    _itemHover: function（parentNode） {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        $（".auto-tip li",parentNode）.hover（function（index,item） {
            ！$（this）.hasClass（_config.hoverBg） && $（this）.addClass（_config.hoverBg）;
        },function（） {
            $（this）.hasClass（_config.hoverBg） && $（this）.removeClass（_config.hoverBg）;
        }）;
    },
    /*
     * 当输入框值为空时候 li项都删掉class hoverBg
     */
    _removeBg: function（parentNode）{
        var self = this,
            _config = self.config;

        $（".auto-tip li",parentNode）.each（function（index,item）{
            $（item）.hasClass（_config.hoverBg） && $（item）.removeClass（_config.hoverBg）;
        }）;
    },
    /**
     * 键盘上下键操作
     */
     _keyUpAndDown: function（targetVal,e,parentNode） {
        var self = this,
            _cache = self.cache,
            _config = self.config;

// 如果请求成功后返回了数据（根据元素的长度来判断）执行以下操作
if（$（".auto-tip" + " li",parentNode） && $（".auto-tip" + " li"）.length > 0） {

            var plen = $（".auto-tip" + " li",parentNode）.length,
                keyCode = e.keyCode;
                _cache.oldIndex = _cache.currentIndex;

            // 上移操作
            if（keyCode == 38） {
                if（_cache.currentIndex == -1） {
                    _cache.currentIndex = plen - 1;
                }else {
                    _cache.currentIndex = _cache.currentIndex - 1;
                    if（_cache.currentIndex < 0） {
                        _cache.currentIndex = plen - 1;
                    }
                }
                if（_cache.currentIndex ！== -1） {

！$（".auto-tip .p-index"+_cache.currentIndex,parentNode）.hasClass（_config.hoverBg） &&
$（".auto-tip .p-index"+_cache.currentIndex,parentNode）.addClass（_config.hoverBg）.siblings（）.removeClass（_config.hoverBg）;

                    var curAttr = $（".auto-tip" + " .p-index"+_cache.currentIndex,parentNode）.attr（"data-html"）;
                    $（_config.targetCls,parentNode）.val（curAttr）;

                    // 给隐藏域赋值
                    $（_config.hiddenCls,parentNode）.val（curAttr）;
                }

            }else if（keyCode == 40） { //下移操作
                if（_cache.currentIndex == plen - 1） {
                    _cache.currentIndex = 0;
                }else {
                    _cache.currentIndex++;
                    if（_cache.currentIndex > plen - 1） {
                        _cache.currentIndex = 0;
                    }
                }

                if（_cache.currentIndex ！== -1） {

                    ！$（".auto-tip .p-index"+_cache.currentIndex,parentNode）.hasClass（_config.hoverBg） &&
                    $（".auto-tip .p-index"+_cache.currentIndex,parentNode）.addClass（_config.hoverBg）.siblings（）.removeClass（_config.hoverBg）;

                    var curAttr = $（".auto-tip" + " .p-index"+_cache.currentIndex,parentNode）.attr（"data-html"）;
                    $（_config.targetCls,parentNode）.val（curAttr）;
                    // 给隐藏域赋值
                    $（_config.hiddenCls,parentNode）.val（curAttr）;
                }

            }else if（keyCode == 13） { //回车操作
                var curVal = $（".auto-tip" + " .p-index"+_cache.oldIndex,parentNode）.attr（"data-html"）;
                $（_config.targetCls,parentNode）.val（curVal）;

                // 给隐藏域赋值
                $（_config.hiddenCls,parentNode）.val（curVal）;

                if（_config.isSelectHide） {
                     ！$（".auto-tip",parentNode）.hasClass（"hidden"） && $（".auto-tip",parentNode）.addClass（"hidden"）;
                 }
                 _config.callback && $.isFunction（_config.callback） && _config.callback（）;

                _cache.currentIndex = -1;
                _cache.oldIndex = -1;

            }
        }
     },
     _keyCode: function（code） {
         var arrs = ["17","18","38","40","37","39","33","34","35","46","36","13","45","44","145","19","20","9"];
         for（var i = 0, ilen = arrs.length; i < ilen; i++） {
             if（code == arrs[i]） {
                 return i;
             }
         }
         return -1;
     },
    /**
      * 当数据相同的时点击对应的项时返回数据
      */
     _executeClick: function（parentNode） {

         var _self = this,
             _config = _self.config;

         $（".auto-tip" + " li",parentNode）.unbind（"click"）;
         $（".auto-tip" + " li",parentNode）.bind（"click",function（e）{
              var dataAttr = $（this）.attr（"data-html"）;

              $（_config.targetCls,parentNode）.val（dataAttr）;
              if（_config.isSelectHide） {
                  ！$（".auto-tip",parentNode）.hasClass（"hidden"） && $（".auto-tip",parentNode）.addClass（"hidden"）;
              }
              // 给隐藏域赋值
              $（_config.hiddenCls,parentNode）.val（dataAttr）;
              _config.callback && $.isFunction（_config.callback） && _config.callback（）;

         }）;
     }
};

// 初始化
$（function（） {
new EmailAutoComplete（{}）;
}）;