編寫簡易的JS輸入框模糊查詢匹配（附有源碼和demo）

前言：JS輸入框模糊匹配插件以前在工作寫過一個類似的 所以這次寫輕松很多，這次寫優化了幾個方面：

1. 添加動態加載css文件 不需要引入css css全部在JS動態生成。

2. 不需要額外的標簽 只需要一個input輸入框 並且默認指定一個class類名為 "inputElem" 當然也可以自己配置參數 還需要一個當前父級容器增加一個默認類名 parentCls(也可以自己配置)，因為輸入框匹配值后需要一個隱藏域 所以需要隱藏域增加一個class "hiddenCls" 當然也支持自己配置參數。

如下代碼：

<div class="parentCls">
        <div style="width:200px;height:26px;border:1px solid #ccc;">
            <input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
        </div>
        <input type="hidden" class="hiddenCls"/>
    </div>


    <div class="parentCls">
        <div style="width:200px;height:26px;border:1px solid #ccc;">
            <input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
        </div>
        <input type="hidden" class="hiddenCls"/>
    </div>

 3. 支持頁面上有多個輸入框。

 4. 支持鼠標點擊和 鍵盤 上移和下移鍵操作 類似於百度輸入框。

 頁面上所有的標簽都是動態的生成的，不需要額外的標簽。如上面的 只需要input標簽 其他的div標簽不依賴 只需要父級元素增加class "parentCls"（當然可以自己配置類名），

 及要傳給后台開發人員的隱藏域輸入框 增加一個class "hiddenCls" 當然也可以自動配置參數。

我的模糊查詢匹配的需求是這樣的：

 1. 每keyup時候 點擊或者鍵盤上移下移操作 輸入框填充用戶名/工號 隱藏域填充工號 發請求 服務器返回數據 渲染出來。當然 隱藏域填充工號 值是form表單提交時候 后台要拿到提交過來的工號 所以需要這么一個隱藏域。

 2. 當用戶直接在輸入框輸入值時候 並沒有鍵盤上移下移 或者 點擊下拉框某一項時候 當鼠標失去焦點時候(blur) 當前輸入框值為空 隱藏域值為空，這樣做的目的 是為了防止上次form提交過后的數據仍然保存在隱藏域里面 當用戶重新輸入的時候 用戶也並沒有操作鍵盤上下移操作或者點擊操作 再點擊提交按鈕時(失去焦點)，那么值為空 隱藏域值為空 這樣防止搜索出來不是用戶輸入的那個東東。

 3. 當用戶點擊某一項時候 或者 上移下移時候 輸入框動態的生成值 且輸入框值現在不能重新輸入 只有當點擊輸入框x的時候 才可以重新輸入。

 4. 已經遺留輸入框可以多選的接口 目前還未完善輸入框多選的操作。

 5. 禁止ctrl+v 或者右鍵 粘貼操作。

下面我們來具體看看效果圖是個什么樣的吧 如下圖所示：

 

下面HTML代碼如下：

 

<div class="parentCls">
        <div style="width:200px;height:26px;border:1px solid #ccc;">
            <input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
        </div>
        <input type="hidden" class="hiddenCls"/>
    </div>


    <div class="parentCls">
        <div style="width:200px;height:26px;border:1px solid #ccc;">
            <input type="text" class="inputElem" style="width:200px;height:26px;line-height:26px;"/>
        </div>
        <input type="hidden" class="hiddenCls"/>
    </div>

    <input type="button" value="提交"/>

 JS代碼如下：

/**
 * JS 模糊查詢
 * @author tugenhua
 * @date 2013-11-19
 * @param 1.當前的input add targetCls 
 * 2. 隱藏域里面統一增加同類名 叫 hiddenCls
 * 3. 在各個父級元素上 添加類名 parentCls
 */

 function AutoComplete (options) {
     this.config = {
        targetCls          : '.inputElem',          // 輸入框目標元素
        parentCls          : '.parentCls',          // 父級類
        hiddenCls          : '.hiddenCls',          // 隱藏域input
        searchForm         :'.jqtransformdone',     //form表單
        hoverBg            : 'hoverBg',             // 鼠標移上去的背景
        outBg              : 'outBg',               // 鼠標移下拉的背景
        isSelectHide       : true,                 // 點擊下拉框 是否隱藏
        url                : '',                    // url接口
        height             : 0,                     // 默認為0 不設置的話 那么高度自適應
        manySelect         : false,                 // 輸入框是否多選 默認false 單選
        renderHTMLCallback : null,                  // keyup時 渲染數據后的回調函數
        callback           : null,                  // 點擊某一項 提供回調
        closedCallback     : null                   // 點擊輸入框某一項x按鈕時 回調函數
     };

     this.cache = {
        currentIndex        : -1,
        oldIndex            : -1,
        inputArrs           : []                 // 多選時候 輸入框值放到數組里面去
     };
     this.init(options);
 }
 
 AutoComplete.prototype = {
    
    constructor: AutoComplete,
    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).click(function(){
                  var callVal = $.trim($(this).val()),
                      curP = $(this).closest(_config.parentCls),
                      hiddenVal = $.trim($(_config.hiddenCls,curP).val()),
                      targetParent = $(this).parent();
                  if(callVal != '' && hiddenVal != '') {
                      self._createDiv(targetParent,callVal);
                      !$(this).hasClass('hidden') && $(this).addClass('hidden');
                      self._hover();
                      self._closed();
                  }
              });
              
              
          /*
           *  禁止 ctrl+v 和 黏貼事件
           */
              $(item).unbind('paste');
              $(item).bind('paste',function(e){
                  e.preventDefault();
                  var target = e.target,
                      targetParent = $(target).closest(_config.parentCls);
                  $(this).val('');
                  $(_config.hiddenCls,targetParent) && $(_config.hiddenCls,targetParent).val('');
              }); 
              
             
              $(item).keyup(function(e){
                  _cache.inputArrs = [];
                  var targetVal = $.trim($(this).val()),
                      keyCode = e.keyCode,
                      elemHeight = $(this).outerHeight(),
                      elemWidth = $(this).outerWidth();
                      
                  // 如果輸入框值為空的話 那么隱藏域的value清空掉
                  if(targetVal == '') {
                       var curParents = $(this).closest(_config.parentCls);
                       $(_config.hiddenCls,curParents).val('');
                  }
                  var targetParent = $(this).parent();
                  $(targetParent).css({'position':'relative'});
                  
                  if($('.auto-tips',targetParent).length == 0) {
                      // 初始化時候 動態創建下拉框容器
                     $(targetParent).append($('<div class="auto-tips hidden"></div>'));
                     $('.auto-tips',targetParent).css({'position':'absolute','top':elemHeight,'left':'0px','z-index':999,'width':elemWidth,'border':'1px solid #ccc','overflow':'hidden'});
                  }
                 
                  
                  var curIndex = self._keyCode(keyCode);
                  if(curIndex > -1){
                          self._keyUpAndDown(targetVal,e,targetParent);
                    }else {
                         var isHasClass = _config.targetCls.replace(/^\./,'');
                         
                         if(targetVal != '' && $(this).hasClass(isHasClass)) {
                            self._doPostAction(targetVal,targetParent);
                         }
                         
                    }
              });
              
               // 失去焦點時 如果沒有點擊 或者上下移時候 直接輸入 那么當前輸入框值情況 隱藏域值情況
              $(item).blur(function(e){
                  var target = e.target,
                      targetParent = $(target).closest(_config.parentCls),
                      hiddenVal = $(_config.hiddenCls,targetParent).val();
                      
                  if($(this).attr('up') || $(this).attr('down') || hiddenVal != '') {
                     return;
                  }else {
                     $(this).val('');
                     $(_config.hiddenCls,targetParent).val('');
                  }
              });
          });

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

          // 點擊文檔
          $(document).click(function(e){
             e.stopPropagation();
             var target = e.target,
                 tagParent = $(target).parent(),
                 attr = $(target,tagParent).closest('.auto-tips');

             var tagCls = _config.targetCls.replace(/^\./,'');

             if(attr.length > 0 || $(target,tagParent).hasClass(tagCls)) {
                return;
             }else {
                $('.auto-tips').each(function(index,item){
                    !$(item,tagParent).hasClass('hidden') && $(item,tagParent).addClass('hidden');
                });
                
             }
          });
          
          var stylesheet = '.auto-tips { margin: 0 1px; list-style: none;height:auto !important;padding: 0px;position:absolute; border:1px solid #ccc; top:27px; left:0; z-index:999; width:100%;background:#fff !important;}' + 
                           '.auto-tips p {overflow: hidden;margin: 1px 0 !important;padding: 5px 5px;border-bottom: 1px solid #e7e7e7;color: #666;text-decoration: none;line-height: 23px;white-space: nowrap;cursor: pointer;zoom: 1;}' + 
                           '.auto-tips p img{ vertical-align:middle;float:left;}' + 
                           '.create-input{line-height:26px,padding-left:3px;}' + 
                           '.create-input span{margin-top:1px;padding-left:3px;height:24px;line-height:24px;float:left;}' +
                           '.create-input span i,.auto-tips span a{font-style:normal;float:left;cursor:default;}' +
                           '.create-input span a{padding:0 0px 0 3px;margin-top:1px;cursor:pointer;}' +
                           '.auto-tips p.hoverBg {background-color: #669cb6;color: #fff;cursor: pointer;}' + 
                           '.hidden {display:none;}';
          
          this._addStyleSheet(stylesheet);
          
    },
    /**
     * 鍵盤上下鍵操作
     */
    _keyUpAndDown: function(targetVal,e,targetParent) {
        var self = this,
            _cache = self.cache,
            _config = self.config;

        // 如果請求成功后 返回了數據(根據元素的長度來判斷) 執行以下操作
        if($('.auto-tips p',targetParent) && $('.auto-tips p',targetParent).length > 0) {

            var plen = $('.auto-tips p',targetParent).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-tips .p-index'+_cache.currentIndex,targetParent).hasClass(_config.hoverBg) &&
                    $('.auto-tips .p-index'+_cache.currentIndex,targetParent).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
                    var curAttr = $('.auto-tips .p-index'+_cache.currentIndex,targetParent).attr('data-html'),
                        embId = $('.auto-tips .p-index'+_cache.currentIndex,targetParent).attr('embId');
                    
                    // 判斷是否是多選操作
                    if(_config.manySelect) {
                        _cache.inputArrs.push(curAttr);
                        _cache.inputArrs = self._unique(_cache.inputArrs);
                        self._manySelect(targetParent);
                    }else {
                        $(_config.targetCls,targetParent).val(curAttr);
                        // 上移操作增加一個屬性 當失去焦點時候 判斷有沒有這個屬性
                        if(!$(_config.targetCls,targetParent).attr('up')){
                            $(_config.targetCls,targetParent).attr('up','true');
                        }
                        var pCls = $(_config.targetCls,targetParent).closest(_config.parentCls);
                        $(_config.hiddenCls,pCls).val(embId);
                        
                        self._createDiv(targetParent,curAttr);
                        self._closed(targetParent);
                        // hover
                        self._hover(targetParent);
                    }
                    
                }

            }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-tips .p-index'+_cache.currentIndex,targetParent).hasClass(_config.hoverBg) &&
                    $('.auto-tips .p-index'+_cache.currentIndex,targetParent).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
                    var curAttr = $('.auto-tips .p-index'+_cache.currentIndex,targetParent).attr('data-html'),
                        embId = $('.auto-tips .p-index'+_cache.currentIndex,targetParent).attr('embId');
                    
                    
                    // 判斷是否是多選操作
                    if(_config.manySelect) {
                        _cache.inputArrs.push(curAttr);
                        _cache.inputArrs = self._unique(_cache.inputArrs);
                        self._manySelect(targetParent);
                    }else {
                        $(_config.targetCls,targetParent).val(curAttr);
                        // 下移操作增加一個屬性 當失去焦點時候 判斷有沒有這個屬性
                        if(!$(_config.targetCls,targetParent).attr('down')){
                            $(_config.targetCls,targetParent).attr('down','true');
                        }

                        var pCls = $(_config.targetCls,targetParent).closest(_config.parentCls);
                        $(_config.hiddenCls,pCls).val(embId);
                        self._createDiv(targetParent,curAttr);
                        self._closed(targetParent);
                        // hover
                        self._hover(targetParent);
                        
                        
                    }
                    
                }
            }else if(keyCode == 13) { //回車操作
                var curVal = $('.auto-tips .p-index'+_cache.oldIndex,targetParent).attr('data-html');
                
                if($(_config.targetCls,targetParent).attr('up') || $(_config.targetCls,targetParent).attr('down')) {
                    $(_config.targetCls,targetParent).val(curVal);
                    if(_config.isSelectHide) {
                        !$(".auto-tips",targetParent).hasClass('hidden') && $(".auto-tips",targetParent).addClass('hidden');
                        !$(_config.targetCls,targetParent).hasClass('hidden') && $(_config.targetCls,targetParent).addClass('hidden');
                    }
                }
                _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;
    },
    _doPostAction: function(targetVal,targetParent) {
        
        var  self = this,
             _cache = self.cache,
             _config = self.config,
             url = _config.url;
        $.get(url+"?keyword="+targetVal+"&timestamp="+new Date().getTime(),function(data){
            var ret = $.parseJSON(data.content),
                results = ret.results;
            if(results.length > 0) {
                self._renderHTML(results,targetParent);
                self._executeClick(results,targetParent);
            }else {
                !$('.auto-tips',targetParent).hasClass('hidden') && $('.auto-tips',targetParent).addClass("hidden");
                $('.auto-tips',targetParent).html('');
                
            }
        });
    },
    _renderHTML: function(ret,targetParent) {
        var self = this,
            _config = self.config,
            _cache = self.cache,
            html = '';

        for(var i = 0, ilen = ret.length; i < ilen; i+=1) {
            html += '<p  data-html = "'+ret[i].lastName+'" embId="'+ret[i].emplId+'" class="p-index'+i+'">' + 
                       '<img src="'+ret[i].image+'" style="margin-right:5px;" height="25" width="25" title="" alt="">' + 
                       '<span>'+ret[i].lastName+'('+ret[i].emplId+')</span>' + 
                    '</p>';
        }
        // 渲染值到下拉框里面去
        $('.auto-tips',targetParent).html(html);
         $('.auto-tips',targetParent).hasClass('hidden') && $('.auto-tips',targetParent).removeClass('hidden');
        $('.auto-tips p:last',targetParent).css({"border-bottom":'none'});

        _config.renderHTMLCallback && $.isFunction(_config.renderHTMLCallback) && _config.renderHTMLCallback();

        // 出現滾動條 計算p的長度 * 一項p的高度 是否大於 設置的高度 如是的話 出現滾動條 反之
        var plen = $('.auto-tips p',targetParent).length,
            pheight = $('.auto-tips p',targetParent).height();

        if(_config.height > 0) {
            if(plen*pheight > _config.height) {
                $('.auto-tips',targetParent).css({'height':_config.height,'overflow':'auto'});
            }else {
                $('.auto-tips',targetParent).css({'height':'auto','overflow':'auto'});
            }
        }
    },
    /**
      * 當數據相同的時 點擊對應的項時 返回數據
      */
    _executeClick: function(ret,targetParent) {
        var self = this,
            _config = self.config,
            _cache = self.cache;
         $('.auto-tips p',targetParent).unbind('click');
         $('.auto-tips p',targetParent).bind('click',function(e){
              var dataAttr = $(this).attr('data-html'),
                  embId = $(this).attr('embId');
              
              // 判斷是否多選
              if(_config.manySelect) {
                  _cache.inputArrs.push(dataAttr);
                  _cache.inputArrs = self._unique(_cache.inputArrs);
                  self._manySelect(targetParent);
              }else {
                 $(_config.targetCls,targetParent).val(dataAttr);
                 var parentCls = $(_config.targetCls,targetParent).closest(_config.parentCls),
                     hiddenCls = $(_config.hiddenCls,parentCls);
                 $(hiddenCls).val(embId);
                 
                 self._createDiv(targetParent,dataAttr);
                 self._hover(targetParent);
                 
                 !$(_config.targetCls,targetParent).hasClass('hidden') && $(_config.targetCls,targetParent).addClass('hidden');
              }
              self._closed(targetParent);
              if(_config.isSelectHide) {
                  !$('.auto-tips',targetParent).hasClass('hidden') && $('.auto-tips',targetParent).addClass('hidden');
              }
              _config.callback && $.isFunction(_config.callback) && _config.callback();
         });

         // 鼠標移上效果
         $('.auto-tips p',targetParent).hover(function(e){
             !$(this,targetParent).hasClass(_config.hoverBg) &&
             $(this,targetParent).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
         });
    },
    _hover: function(targetParent){
        $('.create-input span',targetParent).hover(function(){
            $(this).css({'padding-left':'3px'});
        },function(){
             
        });
        $('.create-input .alink',targetParent).hover(function(){
            $(this).css({'color':'#D96500'});
        },function(){
             $(this).css({'color':''});
        });
    },
    // 動態的創建div標簽 遮住input輸入框
    _createDiv: function(targetParent,dataAttr){
         var self = this,
             _config = self.config;
         var iscreate = $('.create-input',targetParent);
         
         // 確保只創建一次div
         if(iscreate.length > 0) {
            $('.create-input',targetParent).remove();
         }
         $(targetParent).prepend($('<div class="create-input"><span><i></i></span></div>'));
         
        
         $('.create-input span i',targetParent).html(dataAttr);
         $(_config.targetCls,targetParent).val(dataAttr);
         $('.create-input span',targetParent).append('<a class="alink">X</a>');
         $('.alink',targetParent).css({'float':'left','background':'none'});
         var parentWidth = $(targetParent).outerWidth(),
             parentheight = $(targetParent).outerHeight(),
             iwidth = $('.create-input i',targetParent).outerWidth(),
             closedWidth = $('.create-input .alink').outerWidth();
          if(iwidth >= parentWidth - closedWidth - 3) {
              $('.create-input span i',targetParent).css({'width':(parentWidth - closedWidth - 3)+'px','overflow':'hidden','float':'left','height':parentheight});
          }
          
    },
    // X 關閉事件
    _closed: function(targetParent){
         var self = this,
             _config = self.config;
         /*
          * 點擊X 關閉按鈕
          * 判斷當前輸入框有沒有up和down屬性 有的話 刪除掉 否則 什么都不做
          */
          $('.alink',targetParent).click(function(){
             $('.create-input',targetParent) && $('.create-input',targetParent).remove();
             $(_config.targetCls,targetParent) && $(_config.targetCls,targetParent).hasClass('hidden') &&
             $(_config.targetCls,targetParent).removeClass('hidden');
             $(_config.targetCls,targetParent).val('');
             //清空隱藏域的值
             var curParent = $(_config.targetCls,targetParent).closest(_config.parentCls);
             $(_config.hiddenCls,curParent).val('');

             var targetInput = $(_config.targetCls,targetParent);
             if($(targetInput).attr('up') || $(targetInput).attr('down')) {
                 $(targetInput).attr('up') && $(targetInput).removeAttr('up');
                 $(targetInput).attr('down') && $(targetInput).removeAttr('down');
             }
             _config.closedCallback && $.isFunction(_config.closedCallback) && _config.closedCallback();
          });
    },
    /*
     * 數組去重復
     */
    _unique: function(arrs) {
        var obj = {},
            newArrs = [];
        for(var i = 0, ilen = arrs.length; i < ilen; i++) {
            if(obj[arrs[i]] != 1) {
                newArrs.push(arrs[i]);
                obj[arrs[i]] = 1;
            }
        }
        return newArrs;
    },
    /*
     * 輸入框多選操作
     */
    _manySelect: function(targetParent) {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        if(_cache.inputArrs.length > 0) {
            $(_config.targetCls,targetParent).val(_cache.inputArrs.join(','));
        }
    },
    /*
     * 判斷是否是string
     */
     _isString: function(str) {
        return Object.prototype.toString.apply(str) === '[object String]';
     },
    /*
     * JS 動態添加css樣式
     */
    _addStyleSheet: function(refWin, cssText, id){
       
        var self = this;
        if(self._isString(refWin)) {
            id = cssText;
            cssText = refWin;
            refWin = window;
        }
        refWin = $(refWin);
        var doc = document;
        var elem;

        if (id && (id = id.replace('#', ''))) {
            elem = $('#' + id, doc);
        }

        // 僅添加一次，不重復添加
        if (elem) {
            return;
        }

        //elem = $('<style></style>'); 不能這樣創建 IE8有bug
        elem =  document.createElement("style");
        
        // 先添加到 DOM 樹中，再給 cssText 賦值，否則 css hack 會失效
        $('head', doc).append(elem);

        if (elem.styleSheet) { // IE
            elem.styleSheet.cssText = cssText;
        } else { // W3C
            $(elem).append(doc.createTextNode(cssText));
        }
    },
    /*
     * 銷毀操作 釋放內存
     */
    destory: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        _cache.ret  = [];
        _cache.currentIndex = 0;
        _cache.oldIndex = 0;
        _cache.inputArrs = [];
        _config.targetCls = null;
    }
 };
 // 初始化
 $(function(){
    var auto = new AutoComplete({
        url: '/rocky/commonservice/user/find.json'
    }); 
 });

JS輸入框模糊匹配下載