Bagaimanakah JavaScript melaksanakan fungsi perkaitan kotak carian?

Bagaimana untuk melaksanakan fungsi perkaitan kotak carian dalam JavaScript?

Dalam aplikasi web moden, kotak carian adalah elemen yang sangat biasa Pengguna boleh memasukkan kata kunci dalam kotak carian untuk mencari kandungan yang berkaitan. Sebagai tambahan kepada fungsi carian asas, fungsi Lenovo menyediakan pengguna dengan pengalaman carian yang lebih mudah. Apabila pengguna memasukkan kata kunci dalam kotak carian, sistem secara automatik akan memberikan beberapa cadangan perkaitan yang berkaitan Pengguna hanya perlu memilih salah satu cadangan untuk mencari, sekali gus meningkatkan ketepatan dan kecekapan carian.

Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi perkaitan kotak carian Kami akan menggunakan gabungan HTML, CSS dan JavaScript untuk melaksanakan fungsi ini. Di bawah ialah contoh kod khusus.

Pertama, kita perlu mencipta kotak carian dan bekas untuk kotak cadangan persatuan dalam HTML:

<input type="text" id="searchBox" placeholder="请输入关键词">
<div id="suggestionBox"></div>

Kod di atas mencipta elemen input dan elemen div sebagai bekas untuk kotak cadangan persatuan.

Seterusnya, kita perlu menggunakan CSS untuk menetapkan gaya kotak carian dan kotak cadangan Lenovo:

#searchBox {
  width: 300px;
  height: 30px;
  padding: 5px;
}

#suggestionBox {
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

Kod di atas menetapkan lebar, ketinggian dan padding kotak carian, serta warna latar belakang, gaya sempadan dan saiz maksimum kotak cadangan Lenovo tinggi.

Kini, kita boleh menulis kod JavaScript untuk melaksanakan fungsi perkaitan. Pertama, kita perlu mendapatkan elemen DOM kotak carian dan kotak cadangan Lenovo:

const searchBox = document.getElementById('searchBox');
const suggestionBox = document.getElementById('suggestionBox');

Seterusnya, kita perlu mendengar acara input kotak carian Apabila pengguna memasukkan kandungan, kita akan mendapat cadangan dan paparan Lenovo dalam kotak cadangan Lenovo:

searchBox.addEventListener('input', function() {
  const keyword = searchBox.value;
  // 根据关键词获取联想建议的数据
  const suggestions = getSuggestions(keyword);
  
  // 清空联想建议框的内容
  suggestionBox.innerHTML = '';
  
  // 将联想建议添加到联想建议框中
  suggestions.forEach(function(suggestion) {
    const suggestionItem = document.createElement('div');
    suggestionItem.textContent = suggestion;
    suggestionItem.addEventListener('click', function() {
      searchBox.value = suggestion;
      suggestionBox.innerHTML = '';
    });
    suggestionBox.appendChild(suggestionItem);
  });
});

Dalam kod di atas, kami menambahkan pendengar acara input pada kotak carian melalui kaedah addEventListener. Apabila pengguna memasukkan kandungan, kami mendapat nilai kotak carian dan memanggil fungsi getSuggestions untuk mendapatkan data yang dicadangkan oleh Lenovo. Kemudian, kami mula-mula mengosongkan kandungan kotak cadangan Lenovo, dan kemudian menambah cadangan Lenovo pada kotak cadangan Lenovo secara bergilir-gilir.

Akhir sekali, kami menambah pendengar acara klik untuk setiap item cadangan persatuan. Apabila pengguna mengklik pada cadangan perkaitan, kami menetapkan nilai cadangan pada kotak carian dan mengosongkan kandungan kotak cadangan perkaitan.

Pada ketika ini, kami telah menyelesaikan pelaksanaan fungsi persatuan kotak carian. Pengguna kini boleh memasukkan kata kunci dalam kotak carian, dan sistem secara automatik akan memberikan cadangan perkaitan yang berkaitan Pengguna boleh memilih salah satu cadangan atau terus memasukkan kata kunci untuk mencari.

Di atas ialah contoh kod terperinci menggunakan JavaScript untuk melaksanakan fungsi perkaitan kotak carian. Harap ini membantu!

Atas ialah kandungan terperinci Bagaimanakah JavaScript melaksanakan fungsi perkaitan kotak carian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!