JS仿百度搜尋自動提示框比對查詢功能_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS仿百度搜尋自動提示框比對查詢功能_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:13 PM

1. 新增動態載入css檔不需要引入css css全部在JS動態產生。
2. 不需要額外的標籤只需要一個input輸入框並且預設指定一個class類名為"inputElem" 當然也可以自己配置參數還需要一個當前父級容器增加一個預設類名parentCls(也可以自己配置)，因為輸入框匹配值後需要一個隱藏域所以需要隱藏域增加一個class "hiddenCls" 當然也支援自己配置參數。

如下碼：

複製碼代碼如下:

div style="width:200px;height:26px;border:1px solid #ccc;">

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

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

頁面上所有的標籤都是動態的產生的，不需要額外的標籤。如上面的只需要input標籤其他的div標籤不依賴只需要父級元素增加class "parentCls"（當然可以自己配置類別名稱），
以及要傳給後台開發人員的隱藏域輸入框增加一個class "hiddenCls" 當然也可以自動設定參數。

我的模糊查詢匹配的需求是這樣的：
1. 每keyup時候點擊或鍵盤上移下移操作輸入框填充用戶名/工號隱藏域填充工號發送請求伺服器返回資料渲染出來。當然隱藏域填充工號值是form表單提交時候後台要拿到提交過來的工號所以需要這麼一個隱藏域。
2. 當使用者直接在輸入框輸入值時候並沒有鍵盤上移下移或點擊下拉框某一項時候當滑鼠失去焦點時候(blur) 當前輸入框值為空隱藏域值為空，這樣做的目的是為了防止上次form提交過後的資料仍然保存在隱藏域裡面當用戶重新輸入的時候用戶也並沒有操作鍵盤上下移操作或者點擊操作再點擊提交按鈕時(失去焦點)，那麼值為空隱藏域值為空這樣防止搜尋出來不是使用者輸入的那個東東。

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

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

5. 禁止ctrl v 或右鍵貼上操作。

下面HTML程式碼如下：複製程式碼

程式碼如下:

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) {

              /*
               * 禁止 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($('

'));
                     $('.auto-tips',targetParent).css({'position':'absolute','top':elemHeight,'left':'0px','z-index':999,'width':elemWidth,'border':'1px solid #ccc'});
                  }


                  var curIndex = self._keyCode(keyCode);
                  if(curIndex > -1){
                          self._keyUpAndDown(targetVal,e,targetParent);
                    }else {
                         if(targetVal != '') {
                            self._doPostAction(targetVal,targetParent);
                         }

                    }
              });

              // 失去焦点时如果没有点击或者上下移时候直接输入那么当前输入框值情况隐藏域值情况
              $(item).blur(function(e){
                  var target = e.target,
                      targetParent = $(target).closest(_config.parentCls);
                  if($(this).attr('up') || $(this).attr('down')) {
                     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;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;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 8px 0 3px;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 results = [{lastName:'tugenhua',emplId:'E0987',image:''},{lastName:'tugenhua',emplId:'E0988',image:''},{lastName:'tugenhua',emplId:'E0989',image:''}];
self._renderHTML(results,targetParent);
self._executeClick(results,targetParent);
/** $.get(url+"?keyword="+targetVal+"×tamp="+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 += '

' +
                       '' +
                       ''+ret[i].lastName+'('+ret[i].emplId+')' +
                    '

';
        }
        // 渲染值到下拉框里面去
        $('.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);

// hover
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({"background":'#ccc','padding-left':'0px'});
        },function(){
             $(this).css({"background":''});
        });
    },
    // 动态的创建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($('

'));
         $('.create-input span i',targetParent).html(dataAttr);
         $(_config.targetCls,targetParent).val(dataAttr);
         $('.create-input span',targetParent).append('X');
         $('.alink',targetParent).css({'float':'left','background':'none'});
    },
    // 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('');

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

elem.styleSheet.cssText = cssText;
} else { // W3C
elem .appendChild(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'
} );
});