Pada tulisan kali ini, akan disajikan cara bagaimana membuat dropdown search pada halaman web. Apa itu dropdown search? Dropdown search adalah form pencarian yang berada dalam tag select option. Dropdown search ini sangat membantu dalam pencarian data yang berada dalam dropdown dalam jumlah yang banyak. Untuk membuat search pada dropdown kita bisa menggunakan library select2 yang bisa Anda lihat di website resminya https://select2.org/.
Dari dokumentasi resmi select2 merupakan library JavaScript yang digunakan untuk membuat pencarian didalam select option. Ada dua cara untuk memasang/instalasi library select2, yaitu:
1. Instalasi menggunakan CDN:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
2. Manual instalasi atau dengan mendownload library terlebih dahulu dan memesangnya dengan memanggil lokasi tempat library tersebut berada.
Contohnya:
<link href="path/select2.min.css" rel="stylesheet" />
<script src="path/select2.min.js"></script>
Peletakan script diatas, diletakkan pada halaman web yang dibuat, diantara tag buka tutup <head>, seperti berikut:
<?php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Dropdown Search</title>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
-------
</body>
</html>
?>
Bagaimana penggunaanya? pada bagian bawah, akan dicoba penerapannya (tanpa terkoneksi ke database) dropdown yang menampilan nama-nama provinsi di indonesia:
<?php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Dropdown Search</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<form method="POST">
<select id="provinsi" name="prov">
<option value="Nanggroe Aceh Darussalam"> Nanggroe Aceh Darussalam </option>
<option value="Sumatra Utara">Sumatra Utara</option>
<option value="Sumatra Barat">Sumatra Barat</option>
<option value="Sumatra Selatan">Sumatra Selatan</option>
<option value="Lampung"> Lampung </option>
<option value="Kepulauan Riau">Kepulauan Riau</option>
<option value="Banten"> Banten </option>
<option value="DKI Jakarta"> DKI Jakarta </option>
<option value="Jawa Barat"> Jawa Barat </option>
<option value="Jawa Tengah"> Jawa Tengah </option>
<option value="Daerah Istimewa Yogyakarta"> Daerah Istimewa Yogyakarta </option>
<option value="Jawa Timur"> Jawa Timur </option>
<option value="Kalimantan Barat"> Kalimantan Barat </option>
</select>
</form>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#provinsi').select2();
});
</script>
</html>
?>
Hasilnya akan seperti ini :
Gampang bukan?
Nah, sekarang bagaimana jika kita ingin membuat dropdown search ini dengan menampilkan data dari database (mysql)?
Ikuti terus yaa, nanti akan dilanjut dibagian bawah...
Membuat Dropdown Seacrh yang terkoneksi ke database
Pertama buat dulu database dan tabel di MySql seperti gambar berikut:
setelah itu, isi tabel tersebut dengan data provinsi dan buat file dropdown.php dengan kode program seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Provinsi</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Dropdown Search</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<form action="" method="POST">
<select name="provinsi" id="prov">
<option disabled selected> - Pilih - </option>
<?php
$koneksi = mysqli_connect("localhost", "root", "root", "latihan");
$provinsi = mysqli_query($koneksi, "SELECT * FROM provinsi");
while ($data = mysqli_fetch_array($provinsi)){
?>
<option value="<?php echo $data['id_provinsi'] ;?>"><?php echo $data['nama_provinsi'] ;?></option>
<?php
}
?>
</select>
<input type="submit" name="simpan" value="Proses">
</form>
</div>
<?php
if(isset($_POST['simpan'])){
$dataterpilih = $_POST['provinsi'];
$prov = mysqli_query($koneksi,"SELECT * FROM provinsi WHERE id_provinsi = $dataterpilih");
$cek = mysqli_num_rows($prov);
if($cek > 0){
$data = mysqli_fetch_array($prov);
$namaprov = $data['nama_provinsi'];
echo "<br>";
echo "Anda Memilih Provinsi:";
echo "<br>";
echo $namaprov;
}else{
echo "Data Tidak Ditemukan";
}
}
?>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#prov').select2();
});
</script>
</html> Jalankan kode program diatas, hasilnya akan sepert ini :
Sudah...
Gampang bukan.....
Selamat mencoba yaa...
