Membuat Pencarian Dalam Select Dengan Bootstrap Select

Posted by Admin on

Friday, October 19, 2018

Kebutuhan dalam aplikasi berbasis web sudah mulai memperhatikan interaksi pengguna secara optimal. Pada masa yang lalu mungkin paradigma aplikasi web berfokus pada apa yang bisa dilakukan untuk mengakomodir kebutuhan pengguna. Namun dimasa sekarang ini, hampir dapat dikatakan bahwa semua kebutuhan pengguna telah terakomdir. Sekarang dengan kondisi seperti itu kenyamanan pengguna dalam menggunakan aplikasi web menjadi hal utama yang mungkin harus lebih serius diperhatikan.


Dalam tutorial kali ini kita membahas mengenai satu komponen input dalam html yang mungkin sudah kita kenal yaitu SELECT. SELECT mempunyai sintaks dasar sebagai berikut:

<select>
<option> string  1</option>
<option> string  2</option>
...
<option>string  n</option>
</select>

Dimana sintaks diatas akan menghasilkan tampilan combobox yang telah kita kenal. Pada dasarnya tidak ada yang salah dengan hal tersebut. Namun pernahkah kita berpikir mengenai data? Kadang kala kita hanya fokus pada task yang terlalu kaku dimana pemikiran yang penting datanya tampil dalam bentuk combo box/select box “selesai”. Selesai dalam tanda kutip tentu pada saat aplikasi tersebut selesai diproduksi atau compile. Nah jika kita juga berpikir pada saat diimplementasi ternyata data di dalam select box tersebut menjadi sangat banyak? Bukankah hal ini menjadikan pengguna tidak nyaman dalam menggunakannya? Apalagi sekarang gadget berbasis mobile telah menjangkau banyak pengguna dimana bisa saja pengguna mobile menjadi pengguna terbesar dalam mengakses suatu aplikasi web. Dapat kebayang bagaimana repotnya bukan jika harus melakukan scroll melalui select box dengan jumlah data yang banyak.

Tentu saja ada solusi untuk masalah tersebut. Dalam artikel ini kita akan menggunakan bootstrap select yang dapat mengakomodir kebutuhan tersebut dengan sangat mudah. Hal ini dapat dilakukan dengan beberapa langkah saja sehingga konsep yang tadinya hanya dibicarakan/bahas dapat terlaksana dan berjalan dengan optimal.

Oke mari kita bahas satu persatu. Untuk kasus saat ini adalah bagaimana memilih kota yang ada di Indonesia dengan menggunakan Bootstrap Select.

1. Langkah pertama siapkan terlebih dahulu datanya

Pada tutorial ini kita menggunakan data nama nama ibu kota provinsi yang ada di Indonesia. Data yang digunakan hanya beberapa sampel data, untuk data lengkapnya dapat di tambahkan sendiri

2. Pemanggilan css untuk bootstrap select

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

3. Pemanggilan javascript untuk bootstrap select

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

4. Pembuatan Form Standar untuk mencari nama kota

<form action="">
<div class="container">

<div class="panel panel-default">
<div class="panel-body">
  <div class="form-group">
    <label>Cari Nama Ibu Kota Provinsi:</label>
    <div>
 <select name="ibukota" class="selectpicker form-control" data-live-search="true">
 <option>Jakarta</option>
 <option>Banda Aceh</option>
 <option>Medan</option>
 <option>Padang</option>
 <option>Pekanbaru</option>
 <option>Jambi</option>
 <option>Pelembang</option>
 <option>Bengkulu</option>
 <option>Bandar Lampung</option>
 <option>Pangkalpinang</option>
 <option>Tanjungpinang</option>
 <option>Bandung</option>
 <option>Semarang</option>
 <option>Yogyakarta</option>
 <option>Surabaya</option>
 <option>Serang</option>
 <option>Denpasar</option>
 <option>Mataram</option>
 <option>Kupang</option>
 <option>Pontianak</option>
 <option>Palangka Raya</option>
 <option>Banjarmasin</option>
 <option>Samarinda</option>
 <option>Tanjung Selor</option>
 <option>Manado</option>
 <option>Palu</option>
 <option>Makassar</option>
 <option>Kendari</option>
 <option>Gorontalo</option>
 <option>Mamuju</option>
 <option>Ambon</option>
 <option>Sofifi</option>
 <option>Jayapura</option>
 <option>Manokwari</option>
 </select>
 </div>
  </div>
</div>
</div>


</div>
</form>

Poin utama dalam pembuatan select search ini adalah pada tag select kita tambahkan atribut class dan data-live-search agar css dan js dari bootstrap select dapat bekerja

<select name="ibukota" class="selectpicker form-control" data-live-search="true">

5. Gabungkan ke tiga langkah diatas menjadi satu kesatuan dengan format html lengkap sehingga menghasilkan output sebagai berikut

Bagaimana cukup mudah bukan? Selamat mencoba ya

Labels: Bootstrap, Select, Tutorial, Web

Terima kasih telah membaca Membuat Pencarian Dalam Select Dengan Bootstrap Select. Bila bermanfaat boleh di share yah :)