Mobil Matic Anda Mogok Di Jalan? Lakukan Ini, Semu...
Membuat HTML Select Tag Element Agar Ada Search Box nya
Ditulis oleh : Putu Adi, 30 Januari 2024
Daftar isi
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.
Solusi : MySQL Order by ASC DESC, tidak bisa mengurutkan angka di phpMyAdmin
Solusi untuk Offcanvas Bootstrap yang tidak bisa tampil. Ternyata ini penyebabnya!
Cara menambahkan event baru di google calender dengan link url di php
Cara menghilangkan atau menyembunyikan scrollbar overflow di HTML CSS
Jumlah Pengunjung Web Drop/Turun Drastis Setelah Saya Melakukan Ini
Subscribe
Login
0 Comments
Oldest
Cari pembahasan apa?