JS输入框邮箱自动提示(带有demo和源码)-白红宇

JS输入框邮箱自动提示(带有demo和源码)

阅读量：5075 次

发布时间：2019-06-12

本文共 14176 字，大约阅读时间需要 47 分钟。

今天在javascriptQQ群里面有童鞋问到有没有 "JS输入框邮箱自动提示"插件，即说都找遍了github上源码都没有看到这样类似的插件，然后我想了下 "JS输入框邮箱自动提示" 和我前几次写的插件功能类似了！也google了下到底是个什么样的效果，看了下也没有什么特别之处，所以趁着今天没有什么事情做的话写一个这样的出来给大家分享下也可以自己积累下，以后如果项目中碰到类似的效果可以直接拿来用。

说了这么多！我们先来看看效果看看到底是个什么样的，其实有时候我看别人的博客或者代码时候也是希望先看看什么效果然后看看他们的代码能不能运行，然后顺着这个思路去研究他们内部代码，所以我底部提供了 "demo下载链接" 大家有空的话也可以研究下我写的代码如有不足之处请大家多多指教！好了先瞎聊到这里！先看看下面效果！如下图：

原理是：一个输入框当我输入任何字的时候自动下拉相应的邮箱提示，在输入框输入11的时候下拉框有所有11的邮箱输入其他的时候有其他文案对应的邮箱。

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

HTML代码如下：

其实上面的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代码如下：

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('');                var wrap = '
      
       ';                for(var i = 0; i < _config.mailArr.length; i++) {                    wrap += '
       '+''+_config.mailArr[i]+'
';                }                wrap += '
      
';                _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 += ''+''+newArrs[j]+'
';                }                $('.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({});});

View Code

转载于:https://www.cnblogs.com/tugenhua0707/p/3466712.html

你可能感兴趣的文章