Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Pelaksanaan html carian
Pelaksanaan html carian
- PHPzasal
- 2023-05-15 17:27:371286semak imbas
Fungsi carian ialah bahagian penting dalam aplikasi web, yang membolehkan pengguna mencari maklumat yang mereka perlukan dengan cepat di tapak web. Dalam artikel ini, saya akan menunjukkan kepada anda cara melaksanakan fungsi carian asas menggunakan HTML dan beberapa kod JavaScript mudah.
Pertama, kita perlu membuat borang untuk menerima pertanyaan carian pengguna. Kita boleh menggunakan elemen borang dalam HTML untuk melaksanakan borang ini, seperti yang ditunjukkan di bawah:
<form> <input type="text" id="searchInput" placeholder="Search..."> <button type="submit" id="searchButton">Search</button> </form>
Dalam kod di atas, kami menggunakan dua elemen, satu ialah elemen input, iaitu medan teks untuk menerima Pertanyaan carian dimasukkan oleh pengguna. Kami juga menambah teks pemegang tempat "Cari..." untuk memberikan petunjuk untuk kotak input.
Yang lain ialah elemen butang, iaitu butang yang membolehkan pengguna menyerahkan borang carian. Kita juga boleh membuat butang hantar menggunakan atribut jenis elemen input.
Seterusnya, kami perlu menambah beberapa kod JavaScript untuk mengendalikan permintaan carian pengguna dan mengembalikan hasilnya. Kami boleh menggunakan API DOM dalam JavaScript untuk mendapatkan pertanyaan carian yang dimasukkan oleh pengguna dan hasil carian daripada tapak web.
Di bawah ialah kod HTML lengkap, termasuk beberapa kod JavaScript asas untuk mengendalikan permintaan carian.
<!DOCTYPE html>
<html>
<head>
<title>Search Example</title>
</head>
<body>
<form>
<input type="text" id="searchInput" placeholder="Search...">
<button type="submit" id="searchButton">Search</button>
</form>
<ul id="searchResults">
<!-- Search results will be added here -->
</ul>
<script>
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const searchResults = document.getElementById('searchResults');
const searchHandler = event => {
event.preventDefault();
const query = searchInput.value;
const results = performSearch(query);
displayResults(results);
};
const performSearch = query => {
// Perform search logic here...
};
const displayResults = results => {
searchResults.innerHTML = '';
for (let result of results) {
const listItem = document.createElement('li');
listItem.textContent = result;
searchResults.appendChild(listItem);
}
};
searchButton.addEventListener('click', searchHandler);
searchInput.addEventListener('keydown', event => {
if (event.key === 'Enter') {
searchHandler(event);
}
});
</script>
</body>
</html>Dalam kod di atas, kami mula-mula mendapatkan kawalan borang dan elemen hasil carian, kemudian gunakan kaedah addEventListener untuk menambah pengendali acara untuk butang carian dan kotak input carian.
Apabila pengguna menyerahkan borang carian, kami menghalang tingkah laku lalai (dalam kes ini memuatkan semula halaman) dan mendapatkan teks pertanyaan pengguna. Kami menghantar pertanyaan kepada fungsi performSearch dan hasilnya kepada fungsi displayResults.
Dalam fungsi performSearch, kami boleh melakukan sebarang logik carian dan mengembalikan hasil yang sepadan dengan pertanyaan. Dalam contoh ini, kami hanya mengekodkan beberapa data palsu untuk mensimulasikan hasil carian.
Dalam fungsi displayResults, kami menggunakan innerHTML untuk mengosongkan semua hasil, kemudian lelaran melalui tatasusunan hasil dan mencipta elemen li untuk setiap hasil dan menambahnya pada elemen ul.
Akhir sekali, kami menambah pendengar acara papan kekunci supaya pengguna boleh menyerahkan pertanyaan carian dengan menekan Enter dalam kotak input.
Dengan melaksanakan fungsi carian mudah ini, kami boleh memberikan pengguna pengalaman tapak yang lebih baik dan memudahkan mereka mencari maklumat yang mereka perlukan.
Atas ialah kandungan terperinci Pelaksanaan html carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!