Membangun bilah pencarian pelengkapan otomatis Anda sendiri lebih mudah daripada yang Anda pikirkan.
Bilah pencarian adalah elemen UI populer yang digunakan banyak situs web modern. Jika Anda membuat situs yang berisi jenis data apa pun, Anda mungkin ingin agar pengguna dapat menelusuri item tertentu.
Ada banyak cara untuk membuat bilah pencarian. Anda dapat membuat bilah pencarian kompleks yang mengembalikan hasil berdasarkan beberapa filter, seperti nama atau tanggal. Pustaka yang ada dapat membantu Anda menerapkan bilah pencarian tanpa membangunnya dari awal.
Namun, Anda juga dapat membuat bilah pencarian sederhana menggunakan vanilla JavaScript, yang membandingkan input pengguna dengan daftar string.
Cara Menambahkan UI untuk Searchbar
Situs web Anda harus menyertakan kotak masukan bagi pengguna Anda untuk memasukkan teks yang ingin mereka cari. Salah satu cara untuk melakukan ini adalah dengan menggunakan tag input, dan menatanya agar terlihat seperti bilah pencarian.
- Buat folder untuk menyimpan situs web Anda. Di dalam folder, buat file HTML bernama index.html.
- Isi file Anda dengan struktur dasar dokumen HTML. Jika Anda tidak terbiasa dengan HTML, ada banyak Contoh kode HTML yang dapat Anda pelajari untuk membantu Anda mendapatkan kecepatan.
<!doctype html>
<html bahasa="en-AS">
<kepala>
<judul>Bilah pencarian</title>
</head>
<tubuh>
<kelas div="wadah">
<!-- Konten halaman web ada di sini-->
</div>
</body>
</html> - Di dalam div kelas kontainer, tambahkan tag input. Ini akan memungkinkan pengguna untuk mengetik teks yang ingin mereka cari. Setiap kali mereka memasukkan karakter baru, situs web Anda akan memanggil fungsi search(). Anda akan membuat fungsi ini di langkah selanjutnya.
Atribut autocomplete memastikan browser tidak akan menambahkan dropdown sendiri berdasarkan istilah pencarian sebelumnya.<kelas div="wadah">
<h2>Cari Negara</h2>
<id masukan="bilah pencarian" pelengkapan otomatis="mati" onkeyup="mencari()" jenis="teks"
nama="mencari" placeholder="Apa yang sedang Anda cari?">
</div> - Di folder yang sama dengan Anda index.html file, buat file CSS baru bernama style.css.
- Isi file dengan gaya untuk keseluruhan halaman web dan bilah pencarian:
tubuh {
margin: 0;
bantalan: 0;
warna latar belakang: #f7f7f7;
}
* {
keluarga font: "Arial", Sans Serif;
}
.wadah {
padding: 100px 25%;
tampilan: fleksibel;
arah fleksibel: kolom;
garis-tinggi: 2rem;
ukuran huruf: 1.2em;
warna: #202C39;
}
#bilahpenelusuran {
padding: 15px;
border-radius: 5px;
}
memasukkan[jenis=teks] {
-webkit-transisi: lebar 0.15 detikkemudahan-in-out;
transisi: lebar 0.15 detikkemudahan-in-out;
} - Di dalam index.html, tambahkan tautan ke file CSS Anda di dalam tag kepala dan di bawah tag judul:
<link rel="stylesheet" href="style.css"> - Buka index.html file di browser web, dan lihat UI bilah pencarian Anda.
Cara Membuat String Daftar untuk Searchbar
Sebelum pengguna dapat mencari, Anda harus membuat daftar item yang tersedia yang dapat mereka cari. Anda dapat melakukan ini dengan array string. Sebuah string adalah salah satu dari sekian banyak tipe data yang dapat Anda gunakan dalam JavaScript, dan dapat mewakili urutan karakter.
Anda dapat membuat daftar ini secara dinamis menggunakan JavaScript, saat halaman sedang dimuat.
- Di dalam index.html, di bawah tag input, tambahkan div. Div ini akan menampilkan dropdown yang berisi daftar item yang sesuai dengan yang dicari pengguna:
<id div="daftar"></div> - Di folder yang sama dengan Anda index.html berkas dan style.css file, buat file baru bernama script.js.
- Di dalam script.js, buat fungsi baru bernama loadSearchData(). Di dalam fungsi, inisialisasi array dengan daftar string. Perlu diingat bahwa ini adalah daftar statis kecil. Implementasi yang lebih kompleks harus mempertimbangkan pencarian melalui kumpulan data yang lebih besar.
fungsiloadSearchData() {
// Data yang akan digunakan di bilah pencarian
membiarkan negara = [
'Australia',
'Austria',
'Brazil',
'Kanada',
'Denmark',
'Mesir',
'Perancis',
'Jerman',
'Amerika Serikat',
'Vietnam'
];
} - Di dalam loadSearchData() dan di bawah larik baru, dapatkan elemen div yang akan menampilkan item pencarian yang cocok kepada pengguna. Di dalam div daftar, tambahkan tag jangkar untuk setiap item data dalam daftar:
// Dapatkan elemen HTML dari daftar
membiarkan daftar = dokumen.getElementById('daftar');
// Tambahkan setiap item data sebagai menandai
negara.untuk setiap((negara)=>{
membiarkan a = dokumen.createElement("a");
a.innerText = negara;
a.daftarkelas.tambahkan("Daftar barang");
daftar.appendChild (a);
}) - Di tag tubuh dari index.html, tambahkan atribut peristiwa onload untuk memanggil fungsi loadSearchData() baru. Ini akan memuat data saat halaman sedang dimuat.
<beban tubuh ="loadSearchData()"> - Di dalam index.html, sebelum tag body berakhir, tambahkan tag skrip untuk menautkan ke file JavaScript Anda:
<beban tubuh ="loadSearchData()">
<!-- Konten halaman web Anda -->
<skrip src="script.js"></script>
</body> - Di dalam style.css, tambahkan beberapa gaya ke daftar tarik-turun:
#daftar {
perbatasan: 1px solid lightgrey;
border-radius: 5px;
tampilan: blok;
}
.Daftar barang {
tampilan: fleksibel;
arah fleksibel: kolom;
dekorasi teks: tidak ada;
padding: 5px 20px;
warna hitam;
}
.Daftar barang:arahkan {
background-color: lightgrey;
} - Membuka index.html di browser web untuk melihat bilah pencarian Anda dan daftar hasil pencarian yang tersedia. Fungsi pencarian belum berfungsi, tetapi Anda akan melihat UI yang akan digunakannya:
Cara Membuat Dropdown Dengan Hasil Yang Cocok Di Dalam Searchbar
Sekarang setelah Anda memiliki bilah pencarian dan daftar string untuk dicari pengguna, Anda dapat menambahkan fungsi pencarian. Saat pengguna mengetik di bilah pencarian, hanya item tertentu dalam daftar yang akan ditampilkan.
- Di dalam style.css, ganti penataan gaya untuk daftar untuk menyembunyikan daftar secara default:
#daftar {
perbatasan: 1px solid lightgrey;
border-radius: 5px;
tampilan: tidak ada;
} - Di dalam script.js, buat fungsi baru bernama search(). Ingatlah bahwa program akan memanggil fungsi ini setiap kali pengguna memasukkan atau menghapus karakter dari bilah pencarian. Beberapa aplikasi memerlukan perjalanan ke server untuk mengambil informasi. Dalam kasus seperti itu, penerapan ini dapat memperlambat UI Anda. Anda mungkin perlu memodifikasi implementasi untuk mempertimbangkan hal ini.
fungsimencari() {
// fungsi pencarian ada di sini
} - Di dalam fungsi search(), dapatkan elemen div HTML untuk daftar. Dapatkan juga elemen tag jangkar HTML dari setiap item di dalam daftar:
membiarkan listContainer = dokumen.getElementById('daftar');
membiarkan daftarItem = dokumen.getElementsByClassName('listItem'); - Dapatkan input yang dimasukkan pengguna ke bilah pencarian:
membiarkan masukan = dokumen.getElementById('searchbar').nilai
masukan = masukan.toLowerCase(); - Bandingkan input pengguna dengan setiap item dalam daftar. Misalnya, jika pengguna memasukkan "a", fungsi tersebut akan membandingkan jika "a" ada di dalam "Australia", lalu "Austria", "Brasil", "Kanada", dan seterusnya. Jika cocok, itu akan menampilkan item itu dalam daftar. Jika tidak cocok, item tersebut akan disembunyikan.
membiarkan tidak ada Hasil = BENAR;
untuk (i = 0; Saya < listItems.panjang; saya++) {
jika (!listItems[i].innerHTML.toLowerCase().termasuk (masukan) || masukan "") {
listItems[i].style.display="tidak ada";
melanjutkan;
}
kalau tidak {
listItems[i].style.display="melenturkan";
tidak ada Hasil = PALSU;
}
} - Jika tidak ada hasil sama sekali dalam daftar, sembunyikan daftar sepenuhnya:
listContainer.style.display = noResults? "tidak ada": "memblokir"; - Klik pada index.html file untuk membukanya di browser web.
- Mulailah mengetik di bilah pencarian. Saat Anda mengetik, daftar hasil akan diperbarui untuk hanya menampilkan hasil yang cocok.
Menggunakan Searchbar untuk Mencari Hasil yang Cocok
Sekarang setelah Anda mengetahui cara membuat bilah pencarian dengan pemilihan string, Anda dapat menambahkan lebih banyak fungsi.
Misalnya, Anda dapat menambahkan tautan ke tag jangkar Anda untuk membuka halaman berbeda tergantung pada hasil yang diklik pengguna. Anda dapat mengubah bilah pencarian untuk mencari melalui objek yang lebih kompleks. Anda juga dapat memodifikasi kode agar berfungsi dengan kerangka kerja seperti React.
