Fungsi pencarian lengkap di halaman html

Baru-baru ini saya sedang mengerjakan kerangka kerja yang telah dimodifikasi oleh banyak orang. Saya merasa pusing ketika melihat kodenya setiap hari. Namun, saya merasa telah membuat kemajuan besar. Saya telah membuat backend dan frontend yang dapat dikonfigurasi untuk dilihat rentang data yang berbeda dari kedua perpustakaan. Cukup bagus. Puas, saya mengeluarkannya untuk dibagikan hari itu. Hari ini saya akan berbicara tentang fungsi yang sedang saya kerjakan beberapa hari terakhir, yaitu fungsi pencarian halaman html.

Fungsi ini terutama digunakan untuk memasukkan karakter di kotak pencarian, lalu tekan tombol sebelumnya dan berikutnya untuk secara otomatis menandai karakter yang cocok di area kueri dengan gaya khusus. Setelah itu, Anda dapat terus menekan tombol sebelumnya dan berikutnya untuk telusuri secara berurutan. Cocokkan karakter dan gunakan pola lain untuk membedakan karakter yang saat ini cocok dari karakter lain yang cocok.

Tampilan front-end mungkin terlihat seperti ini:

Htmlnya seperti ini:

 <div class=container style=z-index: 999 id=searchDiv> <div class=keyword-search> Temukan: <input id=key type=text style=width: 200px placeholder=keyword/> <a href= javascript :void(0); kelas=prev onclick='wordSearch(1)'><i class=c-icon></i></a> <a href=javascript:void(0); class=next onclick='wordSearch()'><i class=c-icon></i></a> </div> </div>

kode skrip:

 <skrip>//Fungsi pencarian var oldKey0 = ; var indeks0 = -1;var oldCount0 = 0; var newflag = 0; var currentLength = 0; ; //Dapatkan nilai kunci if (!key) { return; //Keluar jika kuncinya kosong} getArray(); (newflag == 0) {//Jika ada pencarian baru, indeks dihapus index0 = 0; } if (!flg) { if (oldCount0 != 0) {//Jika masih ada pencarian if (index0) < oldCount0) {// Jika Anda belum selesai berjalan di sebelah kiri, lanjutkan ke kiri focusMove(index0); ); indeks0++; } lain { indeks0 = 0;//FokusMove belum ditentukan(indeks0++; {//Jika Anda belum selesai berjalan di sebelah kiri, lanjutkan ke kiri indeks0--; focusMove(index0); else if (index0 == 0) {//Anda telah selesai berjalan indeks0 = oldCount0; indeks0-- focusMove(index0); } } } } fungsi getArray() { bendera baru = 1; $(.contrast .result).removeClass(res); /Dapatkan nilai kunci if (!key) { oldKey0 = ; return; //Keluar jika kunci kosong} if (oldKey0 != key || $(.current).length != Panjang saat ini) { //Setel ulang indeks0 = 0; var indeks = 0; $(.kontras .hasil).setiap(fungsi () { $(ini).replaceWith($(ini).html()); } ) ; pos0 = Array baru(); if ($(.contrast-wrap).hasClass(saat ini)) { Panjang saat ini = $(.saat ini).panjang; .contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id='result + (index++) + ' class= 'hasil'> + kunci + </span>)); // Ganti } } else { $(.contrast-wrap).addClass('currentLength = $(.saat ini).panjang; $(.kontras).setiap(fungsi () { $(ini).html($(ini).html().ganti(RegExp baru(kunci, gm), <span id= 'hasil + (indeks++) + ' kelas='hasil'> + kunci + </span>)); // Ganti }); //$(#key).val(kunci); //$(.contrast .result).each(function () { // $(ini).parents('.contrast-wrap').addClass('current'); // pos0.push($(ini) .offset().top); //}); // pos0.push($(.kontras .hasil:eq(2)).offset().top - $(.kontras .hasil:eq(2)).parents(.contrast).offset().top); oldCount0 = $(.contrast .result).length; newflag = 0; .hasil:eq( + indeks0 + )).parents('.contrast-wrap').addClass('current'); $(.kontras .hasil:eq( + indeks0 + )).addClass(res); var top = $(.kontras .hasil:eq( + indeks0 + )).offset().top + $(.kontras .hasil :eq( + indeks0 + )).parents(.contrast).scrollTop(); var intop = top - $(.contrast .hasil:eq( + indeks0 + )).parents(.contrast).offset().top; $(.contrast .result:eq( + indeks0 + )).parents(.contrast).animate({ scrollTop: ke dalam }, 200); jika ($(.kontras .hasil:eq( + indeks0 + )).parents(.contrast).scrollTop() == 0) { $(html, body).animate({ scrollTop: top - 200 }, 200); else { $(html, body).animate({ scrollTop: $(.contrast .result:eq( + indeks0 + )).parents(.contrast).offset().top - 200 }, 200); } } $('#kunci').perubahan(fungsi () { jika ($('#kunci').val() == ) { indeks0 = 0; $(.kontras .hasil). masing-masing(fungsi () { $(ini).replaceWith($(ini).html()); }); oldKey0 = ; } </skrip>

Pertama, hapus hasil kueri terakhir, lalu gunakan ekspresi reguler untuk menambahkan gaya khusus ke semua karakter yang cocok di area berdasarkan nilai kunci, misalnya, tag span dengan nama kelas result ditambahkan ke metode. gunakan variabel odKey0 untuk mencatat nilai kunci (Bandingkan dulu saat Anda masuk lain kali. Jika sama, berarti Anda perlu melihat konten berikutnya atau sebelumnya, jadi Anda tidak perlu menggunakan pencocokan ekspresi reguler saat memasukkan). oldCount0 mencatat jumlah total kueri , dan newflag disetel ke 0 (jika ini bukan pertama kalinya) Kueri newflag adalah 1).

Kemudian masukkan metode getNext. flg menunjukkan apakah pengguna menekan tombol sebelumnya atau berikutnya. Gunakan indeks0 untuk mencatat karakter cocok mana yang sedang dilihat. Bandingkan dengan oldCount0 untuk menentukan apakah akan menambah atau mengurangi atau disetel ke 0 (jika lebih besar dari oldCount0 atau kurang dari 0 , Anda harus memulai dari awal).

Metode focusMove adalah operasi yang memposisikan halaman ke elemen saat ini.

eq() selector: Selector memilih elemen dengan nilai indeks tertentu. Misalnya: $(.contrast .result:eq(1)) memilih elemen kedua bernama result dalam elemen yang nama kelasnya kontras.

metode parent(): semua elemen induk dari elemen. $(p).parents('.contrast-wrap') , semua elemen bernama kontras-wrap dari elemen p.

metode replace(): Ganti elemen yang dipilih dengan konten html yang ditentukan. Perhatikan bahwa elemen dari elemen yang dipilih juga diganti.

metode offset(): Mengembalikan atau menyetel offset (posisi) elemen yang cocok relatif terhadap dokumen.

metode scrollTop(): Mengembalikan atau menyetel posisi vertikal bilah gulir elemen yang cocok.

Di atas adalah fungsi pencarian di halaman HTML yang diperkenalkan editor kepada Anda. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!