js輸入框郵箱自動(dòng)提示功能代碼實(shí)現(xiàn)

2024-05-06 15:57:33

字體：大中小

供稿：網(wǎng)友

一個(gè)輸入框當(dāng)我輸入任何字的時(shí)候自動(dòng)下拉相應(yīng)的郵箱提示，在輸入框輸入11的時(shí)候下拉框有所有11的郵箱輸入其他的時(shí)候有其他文案對應(yīng)的郵箱,下面實(shí)現(xiàn)這個(gè)自動(dòng)提示功能

同理此插件不需要任何html標(biāo)簽，只需要一個(gè)輸入框有相對應(yīng)的class類名就ok 且父級有個(gè)class類名，其他的都不需要。內(nèi)部的HTML代碼都是自動(dòng)生成的。

HTML代碼如下：

復(fù)制代碼代碼如下:

其實(shí)上面的div標(biāo)簽都可以不需要只需要在input輸入框且父級元素添加一個(gè)如上class(自定義也可以，只是在JS初始化的時(shí)候要傳入class就ok 我默認(rèn)情況下父級class叫parentCls,當(dāng)前輸入框class叫inputElem,隱藏域的class叫hiddenCls，在初始化的時(shí)候直接初始化傳入空對象即可！)。因?yàn)轫撁嫔峡赡苡卸鄠€(gè)輸入框所以需要一個(gè)父級class 來區(qū)分是那個(gè)輸入框，當(dāng)然要個(gè)隱藏域存值給開發(fā)后臺(tái)。

其中在配置項(xiàng)里面有個(gè)郵箱數(shù)組參數(shù) mailArr : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"] 。就是要告訴我們默認(rèn)郵箱有這么多，不管我輸入什么下拉框初始化時(shí)候有這么多郵箱提示，當(dāng)我精確到某一項(xiàng)的時(shí)候在給個(gè)提示精確到某一項(xiàng)下拉。當(dāng)然由于需求的變更郵箱這個(gè)參數(shù)可以自己初始化時(shí)候自己根據(jù)需求配置。

代碼風(fēng)格還是和以前一樣。

實(shí)現(xiàn)的功能如下：

1. 支持鍵盤上下移鍵盤操作，支持鼠標(biāo)點(diǎn)擊及按回車操作。

2. 點(diǎn)擊document時(shí)候除當(dāng)前input輸入框之外下拉框隱藏。當(dāng)接著輸入時(shí)候實(shí)現(xiàn)自動(dòng)匹配等等操作。

具體不多說就是類似于網(wǎng)上注冊時(shí)候郵箱自動(dòng)提示功能一樣，如果有任何bug的話可以給我留言，時(shí)間也不早了不羅嗦了！直接貼代碼：

CSS代碼如下：

復(fù)制代碼代碼如下:

JS代碼如下：

復(fù)制代碼代碼如下:

/**
* 郵箱自動(dòng)提示插件
* @constructor EmailAutoComplete
* @ options {object} 可配置項(xiàng)
*/

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');
                    // 渲染下拉框內(nèi)容
                    self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
                }


            });
        });

       // 阻止form表單默認(rèn)enter鍵提交
       $(_config.searchForm).each(function(index,item) {
            $(item).keydown(function(e){
                 var keyCode = e.keyCode;
                 if(keyCode == 13) {
                     return false;
                 }
            });
       });

       // 點(diǎn)擊文檔document時(shí)候下拉框隱藏掉
       $(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');
             });
          }
       });
    },
    /*
     * 渲染下拉框提示內(nèi)容
     * @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"/>');
                var wrap = '<ul>';

for(var i = 0; i < _config.mailArr.length; i++) {

                    wrap += '<li>'+'<span></span><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});
            }

            // 給所有l(wèi)i添加屬性 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});
            });

// 精確匹配內(nèi)容
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});

            // 鼠標(biāo)移到某一項(xiàng)li上面時(shí)候
            self._itemHover(cfg.parentNode);

            // 點(diǎn)擊對應(yīng)的項(xiàng)時(shí)
            self._executeClick(cfg.parentNode);
        }

    },
    /**
     * 精確匹配某項(xiàng)內(nèi)容
     */
    _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>'+'<span></span><em data-html="'+newArrs[j]+'">'+newArrs[j]+'</em></li>';
                }
                $('.auto-tip',cfg.parentNode).html(html);

                // 給所有l(wèi)i添加屬性 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});
                });

                // 精確匹配到某項(xiàng)時(shí)候讓當(dāng)前的索引等于初始值
                _cache.currentIndex = -1;
                _cache.oldIndex = -1;

                $('.auto-tip .output-num',cfg.parentNode).html(prefix);

// 鼠標(biāo)移到某一項(xiàng)li上面時(shí)候
self._itemHover(cfg.parentNode);

                // 點(diǎn)擊對應(yīng)的項(xiàng)時(shí)
                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('');
            }
        }
    },
    /*
     * 鼠標(biāo)移到某一項(xiàng)li上時(shí)
     */
    _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);
        });
    },
    /*
     * 當(dāng)輸入框值為空時(shí)候 li項(xiàng)都刪掉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;

// 如果請求成功后返回了數(shù)據(jù)(根據(jù)元素的長度來判斷) 執(zhí)行以下操作
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;
     },
    /**
      * 當(dāng)數(shù)據(jù)相同的時(shí) 點(diǎn)擊對應(yīng)的項(xiàng)時(shí) 返回?cái)?shù)據(jù)
      */
     _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({});
});

上一篇：多個(gè)jquery.datatable共存,checkbox全選異常的快速解決方法

下一篇：javascript中文本框中輸入法切換的問題