简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

Melaksanakan kawalan segera pintar berdasarkan jquery intellSeach.js_jquery

WBOY
Lepaskan： 2016-05-16 15:10:31
asal
1262 orang telah melayarinya

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("没有当前项");
      }
    }
  }  
});
Salin selepas log masuk

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);
Salin selepas log masuk

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;}
Salin selepas log masuk

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

Label berkaitan：
jquery智能提示控件 jquery提示控件 intellSeach.js
sumber：php.cn
Artikel sebelumnya：Ajar anda cara menggunakan javascript untuk mencapai kesan awan tag rawak_dengan kemahiran code_javascript Artikel seterusnya：Pengesahan borang Javascript length_javascript tips
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Pautan dan butang Highcahrts dalam petua alat tidak berfungsi Saya cuba mencetuskan acara klik dari dalam petua alat. Saya meletakkan butang dengan acar...
daripada 2024-04-04 22:01:46
0
1
1352
seterusnya tidak berfungsi dengan betul dalam middleware menggunakan Nodejs Saya bekerja dengan Nodejs dan menggunakan expressjs dan sekarang saya sedang mengusahakan...
daripada 2024-04-04 17:33:56
0
1
340
Bagaimana untuk mencari data JSON berdasarkan kandungan lain dalam objek JSON apabila pendua wujud? Saya sedang melaksanakan beberapa carta data pada tapak web dan saya mempunyai JSON yang m...
daripada 2024-04-04 10:57:45
0
1
413
Bagaimanakah saya boleh mencipta acara jQuery yang memaparkan borang pada klik dua kali, tetapi tidak mencetuskan acara klik dua kali borang? Saya ingin menulis acara yang apabila pengguna mengklik dua kali pada sel jadual, sel itu ...
daripada 2024-04-01 13:42:52
0
2
445
52 imej dalam Array JS Saya sedang belajar Pembantu IT 1 tahun dan pada masa ini kami perlu menulis permainan kad...
daripada 2024-03-30 21:14:49
0
1
272
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！