Melaksanakan kawalan segera pintar berdasarkan jquery intellSeach.js_jquery

1. Permintaan

Kami sering menghadapi keperluan untuk [carian tapak]. Untuk meningkatkan pengalaman pengguna, kami berharap dapat mencapai gesaan pintar masa nyata seperti Baidu. Sebagai contoh: dalam sistem pengurusan kakitangan syarikat, jika anda ingin mencari Li XX, hanya masukkan "Li", dan sistem secara semula jadi akan menggesa beberapa pekerja bernama Li, yang sesuai untuk pengguna. Secara terang-terangan, sistem akan menggesa hasil yang berkaitan semasa pengguna menaip atau, apabila pengguna mengklik pada kotak carian, ia akan mengesyorkan beberapa kandungan Sebagai contoh, 360 dan Baidu akan menggesa berita atau kandungan utama hari ini dengan carian yang besar isipadu.

jquery sudah mempunyai pemalam seperti ini, dipanggil autolengkap, tetapi saya rasa ia tidak mudah digunakan. Banyak juga pengenalan untuk autocomplete Kawan-kawan yang berminat boleh mencubanya.

Seperti yang anda boleh ketahui daripada tajuk, ini hanyalah pemalam dan tidak akan membincangkan algoritma dan proses carian latar belakang yang berkaitan Dengan kata lain, latar belakang mengembalikan data dalam format tertentu, dan kawalan bertanggungjawab memberikan keputusan. ok, mari kita lihat pemaparan dahulu:

　

Gaya tiada kaitan dengan kawalan, hanya teks input diperlukan.

2. Perihalan parameter

Kawalan menggunakan format json sebagai format penghantaran. Terdapat banyak parameter, yang kebanyakannya mempunyai nilai lalai (lihat kod sumber untuk butiran beberapa mungkin tidak biasa digunakan, jadi kekalkan nilai lalai). Seperti berikut:

　 url: Minta alamat. Contohnya: Handler.ashx, alamat untuk mendapatkan data di latar belakang

  sifat: Sifat objek json yang akan dipaparkan. Jika kami terus mengembalikan borang ["tom","tom cat","tom2"], maka atribut ini tidak perlu ditetapkan tetapi kadangkala kami akan mengembalikan [{"Name":"tom","ID": " 001"},{"Name":"tom cat","ID":"002"},{"Name":"tom2","ID":"003"}] Dalam borang ini, Nama dipaparkan. Kemudian tetapkan sifat ini kepada "Nama". Bagi ID item yang diklik yang kita ingin dapatkan apabila mengklik, kita boleh menggunakan acara klik.

  itemNombor: Bilangan item yang dipaparkan.

  isEmptyRequest: Sama ada hendak memulakan permintaan apabila kosong. Seperti yang dinyatakan sebelum ini, jika anda ingin mengesyorkan beberapa kandungan apabila anda mengklik pada kotak carian (tiada kandungan pada masa ini), tetapkan atribut ini kepada benar dan permintaan akan dimulakan.

 Nilai lalai: Nilai lalai. Biasanya ia akan menjadi gesaan seperti: "Sila masukkan kata kunci...".

  lebar: Lebar senarai juntai bawah.

　 penjajar: Elemen yang hendak dijajarkan.

 maxHeight: Ketinggian maksimum. Jika ketinggian ini ditetapkan, bar skrol akan muncul apabila ia melebihi.                                                                          

 

ajax:{ Tamat masa: Tamat masa
cache: Sama ada untuk cache
},  

　

acara:{    ​​ setData: Dicetuskan sebelum menghantar permintaan. Digunakan untuk menetapkan parameter
itemClick: Dicetuskan dengan mengklik pada item
             enterKeydown: Dicetuskan dengan menekan kekunci enter
           beforeRender: Dicetuskan sebelum semua item dipaparkan
endRender: dicetuskan selepas semua item dipaparkan
itemBeforeRender: Dicetuskan sebelum item dipaparkan
itemAfterRender: Dicetuskan selepas item dipaparkan
             sebelumHantar: Dicetuskan sebelum menghantar permintaan. Pengguna menetapkan parameter pengepala permintaan, dsb., yang setara dengan jquery ajax beforeSend.
}

Kaedah dalam peristiwa akan dicetuskan pada masa yang sesuai Perlu diingat bahawa semua kaedah menerima parameter, yang merupakan objek dengan 4 atribut Dalam beberapa kes, jika tiada atribut sedemikian, ia akan kosong. Termasuk atribut berikut:

　 jini: objek input jQuery.

　 jItem: Objek jQuery bagi item .

data: Rentetan json dikembalikan. Jika json yang dikembalikan perlu diproses di latar depan, ia boleh diperolehi melalui atribut data Selepas pemprosesan selesai, rentetan json perlu dikembalikan.

　acara: Objek acara, seperti objek acara apabila enter ditekan.

3. Contoh

Contoh penggunaan:

$("#search").intellSearch({
  url:"Handler.ashx",
  property:"Name",
  itemNumber:5,
  isEmptyRequest:false,
  defaultValue:"请输入关键字...",    
  width:$("#search").width() + 2,
  maxHeight:-1,
  event:{
    itemClick:function(obj){
      alert(obj.item.ID);
    },
    enterKeydown:function(obj){
      if(obj.item){
        alert("有当前项");
      }else{
        alert("没有当前项");
      }
    }
  }  
});

4. Ringkasan　

Jika anda masih mempunyai logik anda sendiri untuk memproses dan panggilan berantai disokong, anda boleh menulis $("#search").intelSearch({parameters...}).focus(function(){your processing ... });

Perkongsian pemalam ini diharapkan dapat membantu rakan yang memerlukan Ia digunakan terutamanya untuk pembelajaran. Memandangkan ia adalah v1.0, mungkin masih terdapat beberapa pepijat yang menemuinya juga boleh memberitahu saya dan saya akan membetulkannya dalam masa.

Kod sumber dilampirkan

kod js

/*搜索智能提示 v1.0
 date:2015.09.08 
*/
;(function(w,$){
  $.fn.intellSearch = function(options){
    var jthis = this;
    var _dftOpts = {
      url:"",//请求地址或数组          
      property:"",//要显示的json对象的属性
      itemNumber:5,//显示的条数
      isEmptyRequest:false,//focus空白是否发起请求
      defaultValue:"",//默认值
      width:0,//列表宽度
      aligner:jthis,//要对齐的元素
      maxHeight:-1,//最大高度          
      ajax:{
        timeout:3000,//超时时间
        cache:true//是否缓存
      },
      event:{
        /*参数说明:parameter:{jthis:"jq input",jItem:"jq item",data:"json result",event:"event"}*/
        setData:null,//设置参数
        itemClick:null,//点击项触发
        enterKeydown:null,//按下enter键触发
        beforeRender:null,//所有项呈现前触发
        endRender:null,//所有项呈现后触发
        itemBeforeRender:null,//项呈现前触发
        itemAfterRender:null,//项呈现后触发
        beforeSend:null//发送请求前触发
      }
    };
    $.extend(_dftOpts,options);
    if(!_dftOpts.url){
      throw Error("url不能为空！");
    }
    var jResult;        
    var _value = "";    
    var _ajax = _dftOpts.ajax;
    var _event = _dftOpts.event;
    var _cache = [];
    var _focusCount = 0;//防止focus触发多次(sogou)
     
    /*on window*/
    window.intellObj = window.intellObj || {}; /*for global event*/
    window.intellDocumentClick = window.intellDocumentClick || function(e){
      if(!window.intellObj.jthis){
        return;
      }
      if(e.target !== window.intellObj.jthis[0]){
        setIntellObj(null);
      }
    }
    window.intellDocumentKeydown = window.intellDocumentKeydown || function(e){
      var jthis = window.intellObj.jthis;
      if(!jthis){
        return;
      }
      var code = e.keyCode;
      var value = window.intellObj.value;      
      var jResult,jCurItem,keyword;
      if(code === 13 || code === 38 || code === 40){
        jResult = window.intellObj.jResult;
        jItems = jResult.find("li");
        jCurItem = jResult.find("li.cur");
        if(code === 13){
          if(jCurItem.length > 0){
            jCurItem.click();
          }else{
            setIntellObj(null);           
            if(_event.enterKeydown){
              _event.enterKeydown({"jthis":jthis,"event":e});
            }
          }
          jthis.blur();
        }else if(jItems.length > 0){
          if(code === 38){
            if(jCurItem.length <= 0){
              jCurItem = jItems.last();
              jCurItem.addClass("cur");
              keyword = jCurItem.text();
            }else{
              var index = jCurItem.index();
              jCurItem.removeClass("cur");
              if(index <= 0){
                keyword = value;              
              }else{
                jCurItem = jItems.eq(index-1);
                jCurItem.addClass("cur");
                keyword = jCurItem.text();
              }
            }
            jthis.val(keyword);
          }else{
            if(jCurItem.length <= 0){
              jCurItem = jItems.first();
              jCurItem.addClass("cur");
              keyword = jCurItem.text();
            }else{
              var index = jCurItem.index();
              jCurItem.removeClass("cur");
              if(index + 1 >= jItems.length){
                keyword = value;
              }else{
                jCurItem = jItems.eq(index+1);
                jCurItem.addClass("cur");
                keyword = jCurItem.text();
              }
            }
            jthis.val(keyword);
          }
        }
      }
    }
    /*event handler*/
    $.fn.unintell = function(){
      remove();
    }
    $(document).unbind({click:window.intellDocumentClick,keydown:window.intellDocumentKeydown})
          .bind({click:window.intellDocumentClick,keydown:window.intellDocumentKeydown});
    jthis.focus(function(){
      _focusCount++;
      if(_focusCount > 1){
        return;
      }
      if(window.intellObj.jthis && jthis !== window.intellObj.jthis){
        setIntellObj(null);
      }
      var keyword = attrValue();
      if(keyword === _dftOpts.defaultValue){
        keyword = "";
        attrValue(keyword);
      }
      if(keyword || _dftOpts.isEmptyRequest){
        sendRequest();
      }
    })
    jthis.blur(function(){      
      _focusCount = 0;
      if(!attrValue()){
        attrValue(_dftOpts.defaultValue);
      }      
    })
    jthis.keyup(function(e){
      if(e.keyCode === 38 || e.keyCode === 40){
        return;
      }
      var keyword = attrValue();
      if(!keyword){
        remove();
        window.intellObj.value = _value = "";
        return;
      }
      if(keyword !== _value){
        window.intellObj.value = _value = keyword;
        sendRequest();
      }
    });
     
    return initBox();
     
    /*function*/
    function initBox(){
      attrValue(_dftOpts.defaultValue);
      return jthis;
    }    
    function initIntell(){      
      generate();
      register();
      setIntellObj({jthis:jthis,jResult:jResult});
    }
    function generate(){
      var offset = _dftOpts.aligner.offset();
      var width = _dftOpts.width &#63; _dftOpts.width : _dftOpts.aligner.width();
      jResult = $("<ul>",{"class":"intellResult"});
      jResult.width(width).css({"position":"absolute","left":offset.left,"top":offset.top + jthis.outerHeight()});
      $("body").append(jResult);
      if(_dftOpts.maxHeight > 0){
        jResult.height(_dftOpts.maxHeight).css("overflowY","scroll");
      }
    }
    function remove(){
      if(jResult){
        jResult.remove();
        jResult = null;
      }
    }
    function register(){
      jResult.on("click","li",function(){
        var jItem = $(this);
        var index = jItem.index();
        var keyword = jItem.text();
        attrValue(keyword);        
        _value = keyword;        
        if(_event.itemClick){
          _event.itemClick({"jthis":jthis,"jItem":jItem,"item":_cache[index]});
        }
      }).on("mouseenter","li",function(){
        $(this).siblings("li").removeClass("cur").end().addClass("cur");
      }).on("mouseleave","li",function(){
        $(this).removeClass("cur");
      });
    }
    function setIntellObj(obj){
      if(!obj){
        if(window.intellObj.jResult){
          window.intellObj.jResult.remove();
        }
        window.intellObj.jthis = null;
        window.intellObj.jResult = null;
      }else{
        window.intellObj.jthis = obj.jthis;
        window.intellObj.jResult = obj.jResult;
      }
    }
    function sendRequest(){
      var data;
      if(_event.setData){        
        data = _event.setData({"jthis":jthis});
      }
      $.ajax({
        url:_dftOpts.url,
        data:data,
        cache:_ajax.cache,
        timeout:_ajax.timeout,
        beforeSend:function(xhr){
          if(_event.beforeSend){
            _event.beforeSend(xhr);
          }
        },
        success:function(data){
          remove();
          showData(data);
        },
        error:null
      });
    }
    function showData(data){
      data = $.trim(data) &#63; $.parseJSON(data) : data;
      if(_event.beforeRender){
        var rs = _event.beforeRender({"jthis":jthis,"data":data});
        if(rs === false){
          return;
        }
        if(rs !== undefined){
          data = rs;
        }
      }
      if(!data){
        return;
      }
      var jItem,jA,jSpan,hasProp,item,text,otherTexts,isRender,index;
      var list = $.isArray(data) &#63; data : [data];
      var length = list.length;
      length = length > _dftOpts.itemNumber &#63; _dftOpts.itemNumber : list.length;
      if(length <= 0){
        return;
      }
      initIntell();
      _cache.length = 0;
      hasProp = list[0][_dftOpts.property];
      for(var i=0;i<length;i++){
        item = list[i];
        if(item === null || item === undefined){
          continue;
        }
        text = hasProp &#63; item[_dftOpts.property] : item;
        text = $.trim(text.toString());
        if(text === ""){
          continue;
        }
        jItem = $("<li>",{"class":"intellResult_item"});
        jA = $("<a>",{"title":text}).appendTo(jItem);
        jSpan = $("<span>").appendTo(jA);
        index = text.toLowerCase().indexOf(_value.toLowerCase());
        otherTexts = splitText(text,_value,index);
        if(otherTexts){
          jSpan.text(text.substr(index,_value.length));
          if(otherTexts.length > 1){
            $("<b>",{"text":otherTexts[0]}).insertBefore(jSpan);
            $("<b>",{"text":otherTexts[1]}).insertAfter(jSpan);
          }else{
            if(index === 0){
              $("<b>",{"text":otherTexts[0]}).insertAfter(jSpan);
            }else{
              $("<b>",{"text":otherTexts[0]}).insertBefore(jSpan);
            }
          }
        }else{
          jSpan.text(text);
        }
        isRender = true;
        if(_event.itemBeforeRender){
          isRender = _event.itemBeforeRender({"jthis":jthis,"jItem":jItem,"item":item});
        }
        if(isRender !== false){
          jResult.append(jItem);
          if(_event.itemAfterRender){
            _event.itemAfterRender({"jthis":jthis,"jItem":jItem,"item":item});
          }
        }
        _cache.push(item);
      }
      if(_event.endRender){
        _event.endRender({"jthis":jthis});
      }
      jResult.show();
    }
    function attrValue(value){
      if(!value && value != ""){
        return $.trim(jthis.val());
      }
      jthis.val(value);
    }
    function splitText(text,value,index){
      var tlength = text.length;
      var vlength = value.length;
      if(index === -1){
        return null;
      }
      if(index === 0){
        if(index + vlength >= tlength){
          return null;
        }
        return [text.substr(index + vlength)];
      }
      if(index + vlength >= tlength){
        return [text.substr(0,index)];
      }
      return [text.substr(0,index),text.substr(index + vlength)];
    }
  }
})(window,jQuery);

Gaya

.intellResult{margin:0;padding:0;background:#fff;border:1px solid #b6b6b6;clear:both;z-index:999;display:none;}
.intellResult li{margin:0;padding:0;padding:5px 15px;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;white-space:nowrap;}
.intellResult li.cur{background:#E5E0E0;}

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.