Fungsi gesaan automatik apabila mencari berdasarkan kemahiran javascript_javascript

Apabila jumlah data tidak terlalu besar dan tiada antara muka berfungsi yang sepadan dengan bahagian belakang, beberapa fungsi carian mudah pada asasnya dilaksanakan oleh bahagian hadapan saya kebetulan menggunakannya baru-baru ini, jadi saya menulis satu dan menyiarkannya untuk dikongsi dengan semua orang:

Rendering:

Penerangan fungsi:

Selepas menekan papan kekunci, cari aksara Cina dalam entri, pinyin yang sepadan dan nombor aksara Cina;

Idea pelaksanaan:

Mula-mula tukar aksara Cina dalam entri ke dalam Pinyin, kemudian sambungkan aksara Cina, Pinyin dan nombor menjadi rentetan biasa, masukkan ke dalam tatasusunan, dan kemudian tentukan sama ada nilai dalam input ialah aksara Cina, Pinyin , atau nombor setiap kali papan kekunci ditekan , dan kemudian gelung melalui tatasusunan mengikut peraturan tetap, supaya entri yang sepadan boleh ditemui

Kaedah pengaktifan:

// carian-ujian-dalaman ---> div paling luar

// nilai carian ---> kotak input input

// search-value-list ---> hasil carian memaparkan div
// search-li ---> Cari item
new SEARCH_ENGINE("search-test-inner","search-value","search-value-list","search-li");
Nota: Entri carian ditambah dua data sementara, nama data dan telefon data, digunakan untuk menyimpan aksara dan nombor Cina.

Nota: Penukaran pinyin menggunakan pemalam yang dipanggil jQuery.Hz2Py-min.js Memandangkan pemalam ini hanya boleh menukar nilai dalam input, terdapat langkah tambahan dalam kod tersebut input sementara , dan kemudian tukar.

HTML:

Salin kod Kod adalah seperti berikut:

   

       
       

   

   

       

           
• 
                  13914157895
                  战士
             

           
• 
                  15112357896
                  牧师
             

           
• 
                  13732459980
                  盗贼
             

           
• 
                  18015942365
                  德鲁伊
             

           
• 
                  15312485698
                  武僧
             

           
• 
                  13815963258
                  死灵法师
             

           
• 
                  13815934258
                  圣骑士
             

       

   

CSS:

复制代码 代码如下:

* { pelapik: 0; margin: 0; }
ol , ul { list-style: none; }
badan { saiz fon: 12px; warna:#333; }
.search-test-inner { margin: 100px auto; padding: 10px; lebar: 400px; latar belakang: #e0e0e0; jejari sempadan: 10px; bayang kotak: 1px 2px 6px #444; }
.search-val-inner { margin-bottom: 20px; padding: 10px; latar belakang: #fff; }
.member-list-inner .search-li { padding: 10px; }
.search-value-list { margin-top: 10px; }
.search-value-list li { padding: 5px; }
.senarai-ahli-dalam .search-li .telefon,
.search-value-list li .phone { float: right; }
.search-value { lebar: 100%; ketinggian: 30px; ketinggian garis: 30px; }
.tips { font-weight: bold; }

JS:

复制代码 代码如下:

//------------------------------------------------ ---【Permulaan】
fungsi SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
//Susun atur untuk menyimpan Pinyin, aksara Cina dan nombor
This.searchMemberArray = [];
//Objek tindakan
This.dom = $("." dom);
//Kotak carian
This.searchInput = "." searchInput;
//Kotak hasil carian
This.searchResultInner = this.dom.find("." searchResultInner);
//Senarai objek carian
This.searchList = this.dom.find("." searchList);
//Tukar kepada pinyin dan simpan dalam tatasusunan
This.transformPinYin();
//Ikatan acara carian
This.searchActiveEvent();
}
SEARCH_ENGINE.prototaip = {
//----------------------------【Tukar kepada Pinyin dan simpan Pinyin, aksara Cina dan nombor ke dalam tatasusunan】
TransformPinYin : function(){
//Simpan objek data buat sementara waktu
           $("body").append('');
        var $pinyin = $("input.pingying-box");
for(var i=0;i // Simpan nama dan tukarkannya kepada Pinyin
               $pinyin.val(this.searchList.eq(i).attr("data-name"));
//Tukar aksara Cina kepada Pinyin
          var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
//Watak-watak Cina
          var cnCharacter = this.searchList.eq(i).attr("data-name");
// Nombor <<>           var digital = this.searchList.eq(i).attr("data-phone");
​​​​​​ //Simpan ke dalam tatasusunan
This.searchMemberArray.push(pinyin "&" cnCharacter "&" digital);
}
//Padam objek data storan sementara
         $pinyin.remove();
},
//--------------------------------[Kata kunci carian kabur]
fuzzySearch : fungsi(jenis,val){
      var s;
        var returnArray = [];
​​​​ //Pinyin
Jika(taip === "pinyin"){
          s = 0;
}
           //Aksara Cina
          else if(taip === "cnCharacter"){
          s = 1;
}
//Nombor
          else if(taip === "digital"){
          s = 2;
}
for(var i=0;i                                 // Mengandungi watak
If(this.searchMemberArray[i].split("&")[s].indexOf(val) >= 0){
                  returnArray.push(this.searchMemberArray[i]);
            }
}
         return returnArray;
},
//----------------------------【Hasil carian keluaran】
Senarai Ahli Jawatan : function(tempArray){
      var html = '';
//Terdapat hasil carian
        if(tempArray.length > 0){
            html = '

搜索结果（' tempArray.length '）

';
            for(var i=0;i                 var sArray = tempArray[i].split("&");
                html = '

';
                html = '' sArray[2] '';
                html = '' sArray[1] '';
                html = '

';
            }
        }
        //无搜索结果
        lain{
            if($(this.searchInput).val() != ""){
                html = '

无搜索结果……

';
            }lain{
                this.searchResultInner.html("");
            }
        }
        this.searchResultInner.html(html);
    },
    //----------------------------【绑定搜索事件】
    searchActiveEvent : function(){
        var searchEngine = ini;
        $(document).on("keyup",this.searchInput,function(){
            //临时存放找到的数组
            var tempArray = [];
            var val = $(this).val();
            //判断拼音的正则
            var pinYinRule = /^[A-Za-z] $/;
            //判断汉字的正则
            var cnCharacterRule = new RegExp("^[u4E00-u9FFF] $","g");
            //判断整数的正则
            var digitalRule = /^[- ]?d (.d )?$/;
            //只搜索3种情况
            //拼音
            if(pinYinRule.test(val)){
                tempArray = searchEngine.fuzzySearch("pinyin",val);
            }
            //汉字
            else if(cnCharacterRule.test(val)){
                tempArray = searchEngine.fuzzySearch("cnCharacter",val);
            }
            //数字
            else if(digitalRule.test(val)){
                tempArray = searchEngine.fuzzySearch("digital",val);
            }
            lain{
                searchEngine.searchResultInner.html('

无搜索结果……

');
            }
              searchEngine.postMemberList(tempArray);
});
}
};

Bukankah kesannya hebat, anda boleh menggunakannya dalam projek anda sendiri selepas mencantikkannya