Membuat HTML Select Tag Element Agar Ada Search Box nya

Kronologi

Ini agar receh sebenernya, tapi bagi programmer pemula pasti sangat bermanfaat. Seperti yang kita tau, salah satu tugas programmer bukan hanya sekedar jago bikin program, tapi juga bagaimana membuat user mudah menggunakan aplikasi, yang sedang kita kembangkan.

Salah satu cara mempermudah user dalam menggunakan aplikasi kita adalah, membuat select tag element agar bisa di search, tidak sekedar muncul drop down saat di klik, tapi juga bisa di search atau di ketik untuk mencari data yang muncul pada select element tersebut.

Contoh select tag yang simpel

<select class="form-select">
  <option selected>Pilih...</option>
  <option value="1">Pilihan Satu</option>
  <option value="2">Pilihan Dua</option>
  <option value="3">Pilihan Tiga</option>
</select>

Masalah

Kalau pilihannya cuman 3 sih nggak masalah pakai cara ini, tapi kalau pilihannya dinamis, isinya puluhan, ratusan atau bahkan ribuan gimana?

Bisa-bisa user mabok, memilih salah satu data, dari sekian banyak pilihan yang tampil.

Solusi

Sebetulnya ada banyak cara, tapi ini salah satu cara yang belakangan ini sering saya pakai, untuk membuat search pada select element. Yaitu dengan Selectize berbasis jQuery.

1. Load semua komponen Selectize

<!-- Load CSS nya -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />

<!-- Load jquery nya -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Load Javascript Selectize -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>

2. Siapkan select elementnya

Pertama siapkan file koneksi.php

<?php
$dbhost = "localhost"; 
$dbuser = "xxx";     // isi user name database kamu
$dbpass = "xxx";     // ini password database kamu
$dbname = "xxx";     // ini nama database kamu

// melakukan koneksi ke database
$connect = new mysqli($dbhost,$dbuser,$dbpass,$dbname);

mysqli_set_charset($connect,"utf8");

// cek koneksi yang kita lakukan berhasil atau tidak
if ($connect->connect_error) {
   // jika terjadi error, matikan proses dengan die() atau exit();
   die('Maaf koneksi gagal: '. $connect->connect_error);
}

Lalu, siapkan element selectnya. Saya asumsikan kalian sudah punya database dan tabel yang ingin di olah ya.

<label class="form-label">Nama Produk</label>							  				
<select placeholder="Ketik nama produk..." name="id_produk" id="id_produk">
	<option value="" selected>Ketik nama produk...</option>
	<?php
	include "koneksi.php";    
	$query = "SELECT * FROM tb_produk";
	$hasil = mysqli_query($connect, $query) or die("Gagal terhubung ke database " . mysqli_error($connect));
	while($data=mysqli_fetch_array($hasil)){
		echo "<option value=$data[id_produk]>$data[nama_produk]</option>";
	}
	?>
</select>

Kita juga perlu mendefinisikan, bahwa si Selectize ini akan hanya berefek pada select tag yang memiliki ID atau Nama tertentu, dalam contoh ini adalah “id_produk”. Ini penting agar tidak berpengaruh ke select tag lainnya, yang tidak memerlukan tritmen seperti ini.

<script type="text/javascript">
	$(document).ready(function () {
		$('#id_produk').selectize({
			sortField: 'text'
		});
	});
</script>

Semoga bermanfaat ya. Kalau ada yang ingin ditanyakan, bisa DM saya di sosmed.

Lihat contoh hasilnya

Salam Berkarya!
Putu Adi.


belajar kombucha

Follow saya di sosial media

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments