Bagaimana untuk menggunakan JavaScript untuk melaksanakan carian masa nyata dan menyerlahkan hasil?

Bagaimana untuk menggunakan JavaScript untuk melaksanakan carian masa nyata dan menyerlahkan hasil?

Dengan perkembangan pesat Internet dan data besar, fungsi carian telah menjadi bahagian yang sangat diperlukan dalam banyak laman web dan aplikasi. Fungsi carian tradisional sering menggunakan kaedah pengguna memasukkan kata kunci dan klik butang carian, dan kemudian halaman dimuat semula untuk memaparkan hasil carian. Walau bagaimanapun, pengalaman pengguna kaedah ini agak lemah, dan pengguna perlu menunggu halaman dimuat semula untuk melihat hasilnya. Untuk meningkatkan pengalaman pengguna, fungsi carian masa nyata wujud.

Fungsi carian masa nyata bermakna apabila pengguna memasukkan kata kunci, hasil carian dipaparkan serta-merta tanpa menyegarkan halaman, dan hasil carian juga boleh diserlahkan supaya pengguna dapat mencari maklumat yang mereka perlukan dengan lebih baik. Di bawah, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi ini dan memberikan contoh kod yang sepadan.

Pertama, kami memerlukan halaman HTML sebagai antara muka paparan bahagian hadapan. Dalam halaman kami memerlukan kotak carian dan kawasan untuk memaparkan hasil carian. Andaikan bahawa kotak carian kami ialah teg input dan kawasan yang memaparkan hasil carian ialah teg div dan idnya masing-masing ialah "searchInput" dan "searchResults". Kodnya adalah seperti berikut:

<input type="text" id="searchInput" placeholder="输入关键字">
<div id="searchResults"></div>

Seterusnya, kita boleh menggunakan JavaScript untuk mendengar peristiwa input kotak carian dan memproses kata kunci yang dimasukkan untuk carian. Kami boleh menggunakan acara input untuk memantau acara input kotak input Dengan memantau acara ini, kami boleh melaksanakan fungsi carian masa nyata. Kodnya kelihatan seperti ini:

var searchInput = document.getElementById('searchInput');
var searchResults = document.getElementById('searchResults');

searchInput.addEventListener('input', function() {
  var keyword = searchInput.value.trim(); // 获取输入的关键字并去除首尾空格

  // 调用搜索函数，传入关键字，并将搜索结果显示在页面上
  showSearchResults(keyword);
});

Kini kita memerlukan fungsi carian untuk memproses kata kunci yang dimasukkan dan mengembalikan hasil carian yang sepadan. Dalam fungsi carian ini, kita boleh menggunakan permintaan Ajax untuk menghantar permintaan ke bahagian belakang dan mendapatkan hasil carian. Demi kesederhanaan, kami hanya mensimulasikan fungsi carian, dengan mengandaikan ia adalah fungsi tak segerak dan mengembalikan tatasusunan yang mengandungi hasil carian. Kodnya kelihatan seperti ini:

function search(keyword, callback) {
  // 模拟异步请求，实际中可能向后端发送请求并获取搜索结果
  setTimeout(function() {
    var results = [
      'JavaScript',
      'HTML',
      'CSS',
      'Ajax',
      'jQuery'
    ];

    // 调用回调函数，将搜索结果传递给回调函数
    callback(results);
  }, 500); // 设置一个延迟来模拟请求的耗时
}

Akhir sekali, kita memerlukan fungsi untuk memaparkan hasil carian pada halaman. Fungsi ini menerima tatasusunan yang mengandungi hasil carian sebagai parameter dan menyerlahkan hasil dan memaparkannya dalam kawasan hasil carian. Kod tersebut kelihatan seperti ini:

function showSearchResults(keyword) {
  search(keyword, function(results) {
    var html = '';

    for (var i = 0; i < results.length; i++) {
      // 使用关键字高亮显示搜索结果
      var highlighted = results[i].replace(keyword, '<span class="highlight">' + keyword + '</span>');
      html += '<p>' + highlighted + '</p>';
    }

    searchResults.innerHTML = html; // 将搜索结果显示在页面上
  });
}

Dalam kod di atas, kami menggunakan teg rentang dengan nama kelas "serlahkan" untuk menyerlahkan kata kunci dalam hasil carian. Kita boleh menambah kesan penonjolan pada elemen dengan nama kelas ini melalui gaya CSS.

Ringkasnya, kami telah melaksanakan fungsi carian masa nyata dengan memantau peristiwa input kotak input. Apabila pengguna memasukkan kata kunci, fungsi carian dipanggil dan hasil carian diserlahkan dan dipaparkan pada halaman. Dengan cara ini, pengguna boleh melihat hasil carian serta-merta, yang meningkatkan pengalaman pengguna.

Sumber rujukan:

• https://dev.to/marvin/js-tutorial-real-time-search-with-vanilla-js-489k

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan carian masa nyata dan menyerlahkan hasil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!