Carian yang ditapis dalam halaman dengan vanila javascript

Meningkatkan pengalaman pengguna pada halaman yang kaya dengan maklumat dengan fungsi carian yang mudah dan mudah. Lupakan Pertanyaan Pangkalan Data atau Parsing JSON - Kaedah ini secara langsung mencari kandungan teks yang diberikan dari laman web. Walaupun carian terbina dalam penyemak imbas wujud, pendekatan ini menawarkan pengalaman penapisan yang halus, menonjolkan hasil yang relevan untuk navigasi yang lebih mudah.

Inilah demo langsung yang mempamerkan fungsi: [pautan ke demo]

Saya menggunakan teknik ini dalam projek dunia nyata: https://www.php.cn/link/2a60eed05079970d61abad679da7ae8f .

Memanfaatkan JavaScript

Tutorial ini menggunakan JavaScript untuk menguruskan semua elemen interaktif. Khususnya, ia akan:

1. Kenal pasti kandungan yang boleh dicari.
2. Pantau input pengguna dalam medan carian.
3. Tapis innerText unsur -unsur yang boleh dicari.
4. Semak sama ada teks termasuk istilah carian ( .includes() adalah kunci di sini).
5. Togol penglihatan elemen berdasarkan perlawanan jangka carian.

Struktur HTML Asas

Mari kita anggap halaman Soalan Lazim di mana setiap soalan dibentangkan sebagai "kad" dengan tajuk dan kandungan:

<h1 id="Seksyen-Soalan-Lazim"> Seksyen Soalan Lazim</h1>

<div>
  <h3 id="Siapa-kita">Siapa kita</h3>
  <p>Ia telah terselamat bukan sahaja lima abad, tetapi juga melompat ke dalam jenis elektronik, yang tersisa pada dasarnya tidak berubah. Ia dipopularkan</p>
</div>

<div>
  <h3 id="Apa-yang-kita-buat">Apa yang kita buat</h3>
  <p>Ia telah terselamat bukan sahaja lima abad, tetapi juga melompat ke dalam jenis elektronik, yang tersisa pada dasarnya tidak berubah. Ia dipopularkan</p>
</div>

<div>
  <h3 id="Mengapa-bekerja-di-sini">Mengapa bekerja di sini</h3>
  <p>Ia telah terselamat bukan sahaja lima abad, tetapi juga melompat ke dalam jenis elektronik, yang tersisa pada dasarnya tidak berubah. Ia dipopularkan</p>
</div>

<div>
  <h3 id="Ketahui-lebih-lanjut">Ketahui lebih lanjut</h3>
  <p>Ingin mengetahui lebih lanjut mengenai kami?</p>
</div>

Untuk halaman dengan banyak soalan, struktur ini berskala dengan berkesan.

Untuk membolehkan interaktiviti, kami akan menggunakan peraturan CSS tunggal:

 .is tersembunyi {paparan: tiada; }

Kelas ini akan ditambah secara dinamik atau dikeluarkan untuk mengawal penglihatan elemen. Kami juga akan menambah input carian:

 <label for="searchbox">Cari:</label>
<input type="text" id="searchbox">

Fungsi JavaScript teras

Kod JavaScript berikut menguruskan fungsi carian:

 fungsi LiveSearch () {
  biarkan kad = document.QuerySelectorAll ('. Card'); // pilih elemen kad
  biarkan searchQuery = document.getElementById ("SearchBox"). Nilai; // Dapatkan istilah carian

  cards.foreach (card => {
    biarkan textContent = card.innertext.tolowerCase (); // normalisasi kepada huruf kecil
    biarkan searchterMlower = SearchQuery.TolowerCase (); // normalisasi kepada huruf kecil

    jika (textContent.includes (searchterMlower)) {
      card.classlist.remove ('is-handden'); // Tunjukkan kad yang sepadan
    } else {
      card.classlist.add ('is-hidden'); // menyembunyikan kad yang tidak sepadan
    }
  });
}

// Tambahkan kelewatan kecil untuk mengelakkan panggilan fungsi yang berlebihan
Biarkan typingtimer;
Biarkan TypeInterval = 500; // setengah saat
biarkan searchInput = document.getElementById ('SearchBox');

SearchInput.AdDeventListener ('Keyup', () => {
  clearTimeout (typingTimer);
  typingTimer = setTimeout (LiveSearch, typeInterval);
});

Kod ini melangkah melalui kad, memeriksa kemasukan istilah carian (kes-insensitif), dan mengemas kini penglihatan dengan sewajarnya. Kelewatan menghalang isu prestasi dari ketukan kekunci pesat.

Memperluas Keupayaan Carian: Padanan Fuzzy

Untuk menggabungkan pemadanan fuzzy (mencari kata kunci yang berkaitan, walaupun tidak dipaparkan secara eksplisit), pertimbangkan untuk menggunakan elemen tersembunyi atau atribut:

Kaedah 1: Unsur Tersembunyi

Tambahkan elemen tersembunyi yang mengandungi kata kunci:

<div>
  <h3 id="Siapa-kita">Siapa kita</h3>
  <p>…</p>
  <span class="hidden-keywords">Rahsia, Syarikat, Sejarah</span>
</div>

Ubah suai liveSearch untuk memasukkan textContent dan bukannya innerText untuk mengakses kata kunci tersembunyi.

Kaedah 2: Atribut

Gunakan atribut seperti alt untuk imej:

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg" class="lazy" alt="Carian yang ditapis dalam halaman dengan vanila javascript">

Laraskan liveSearch untuk menggunakan getAttribute('alt') untuk mencari nilai atribut.

Nota penting

Kaedah carian ini terhad kepada kandungan yang telah diberikan di DOM. Ia tidak sesuai untuk mencari pangkalan data luaran atau dataset besar.

Kesimpulan

Penyelesaian carian dalam halaman yang mudah, namun berkesan, dilaksanakan dengan vanila JavaScript, dapat meningkatkan kebolehgunaan laman web dengan kandungan yang luas. Menyesuaikan dan mengembangkan teknik ini untuk memenuhi pelbagai aplikasi, dari halaman FAQ ke galeri imej.

Atas ialah kandungan terperinci Carian yang ditapis dalam halaman dengan vanila javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!