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 bisa Anda pelajari untuk membantu Anda mendapatkan kecepatan.
<!doctype html>
<html lang="en-US">
<head>
<title>Searchbar</title>
</head>
<body>
<div class="container">
<!-- Webpage content goes here-->
</div>
</body>
</html> - Di dalam div kelas kontainer, tambahkan tag masukan. 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.
<div class="container">
<h2>Search Countries</h2>
<input id="searchbar" autocomplete="off" onkeyup="search()" type="text"
name="search" placeholder="What are you looking for?">
</div>Atribut autocomplete memastikan browser tidak akan menambahkan dropdown sendiri berdasarkan istilah pencarian sebelumnya.
- 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:
body {
margin: 0;
padding: 0;
background-color:
}
* {
font-family: "Arial", sans-serif;
}
.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2em;
color:
}
padding: 15px;
border-radius: 5px;
}
input[type=text] {
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
} - Di index.htmltambahkan tautan ke file CSS Anda di dalam tag kepala dan di bawah tag judul:
<link rel="stylesheet" href="styles.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 JavaScriptdan dapat mewakili urutan karakter.
Anda dapat membuat daftar ini secara dinamis menggunakan JavaScript, saat halaman sedang dimuat.
- Dalam index.html, di bawah tag input, tambahkan div. Div ini akan menampilkan dropdown yang berisi daftar item yang sesuai dengan yang dicari pengguna:
<div id="list"></div> - Di folder yang sama dengan Anda index.html berkas dan style.css file, buat file baru bernama script.js.
- 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.
function loadSearchData() {
let countries = [
'Australia',
'Austria',
'Brazil',
'Canada',
'Denmark',
'Egypt',
'France',
'Germany',
'USA',
'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:
let list = document.getElementById('list');
countries.forEach((country)=>{
let a = document.createElement("a");
a.innerText = country;
a.classList.add("listItem");
list.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.
<body onload="loadSearchData()"> - Di index.htmlsebelum tag body berakhir, tambahkan tag skrip untuk menautkan ke file JavaScript Anda:
<body onload="loadSearchData()">
<!-- Your webpage content -->
<script src="script.js"></script>
</body> - Di style.csstambahkan beberapa gaya ke daftar tarik-turun:
border: 1px solid lightgrey;
border-radius: 5px;
display: block;
}
.listItem {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 5px 20px;
color: black;
}
.listItem:hover {
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 style.cssganti penataan gaya untuk daftar untuk menyembunyikan daftar secara default:
border: 1px solid lightgrey;
border-radius: 5px;
display: none;
} - Di 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.
function search() {
} - Di dalam fungsi search(), dapatkan elemen div HTML untuk daftar. Dapatkan juga elemen tag jangkar HTML dari setiap item di dalam daftar:
let listContainer = document.getElementById('list');
let listItems = document.getElementsByClassName('listItem'); - Dapatkan input yang dimasukkan pengguna ke bilah pencarian:
let input = document.getElementById('searchbar').value
input = input.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.
let noResults = true;
for (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === "") {
listItems[i].style.display="none";
continue;
}
else {
listItems[i].style.display="flex";
noResults = false;
}
} - Jika tidak ada hasil sama sekali dalam daftar, sembunyikan daftar sepenuhnya:
listContainer.style.display = noResults ? "none" : "block"; - 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.
