JQuery Multiple-Select Combobox untuk Tampilan Combobox yang Lebih Baik

Combobox atau Selecbox merupakan salah satu komponen penting dari form inputan. Melalui jenis inputan ini, normalnya pengguna dapat memilih satu pilihan yang ditampilkan dalam bentuk drop-down. Namun dengan menambahkan atribut multiple, maka pengguna juga dapat memilih lebih dari satu pilihan sekaligus. Pada jenis combobox dengan pilihan tunggal memang pengguna rata-rata cukup nyaman dengan bentuk dasarnya, namun pada bentuk jamak (multiple-select combobox), pengguna seringkali tidak terlalu nyaman karena dalam memilih beberapa pilihan sekaligus harus menekan tombol Ctrl. Sedangkan tidak semua pengguna memahami hal tersebut.

multi-select-04

Dalam tutorial ini, dibahas mengenai bagaimana memanfaatkan Plugin JQuery Multiple-Select untuk membuat penampilan combobox menjadi lebih nyaman dan lebih mudah dari sisi pengguna. Plugin Jquery Multiple-Select yang akan kita gunakan mengharuskan penggunaan library JQuery versi 1.7.0 ke atas. Plugin ini memiliki beberapa fitur unggulan (seperti dikutip dari situs resminya) sebagai berikut:

  • Secara default akan menampilkan pilihan combobox dalam bentuk checkbox.
  • Mendukung pilihan group (optgroup).
  • Dapat menampilkan beberapa item sekaligus dalam sebuah baris.
  • Terdapat pilihan “Select all”
  • Terdapat pilihan placeholder.

Plugin ini juga dapat dijalankan di berbagai browser modern, seperti IE 7+, Chrome 8+, Firefox 10+, Safari 3+ dan Opera 10.6+.

Download Library JQuery dan Plugin JQuery Multiple-Select

Sebelum mencoba contoh-contoh program dalam tutorial ini, kita harus mendownload library JQuery dan plugin Multiple-Select di link berikut ini:

  1. Download versi terakhir JQuery di laman http://code.jquery.com
  2. Download Plugin JQuery Multiple-Select di halaman http://wenzhixin.net.cn/p/multiple-select atau http://plugins.jquery.com/multiple.select/

Contoh Sederhana Penggunaan Plugin Multiple-Select

Seperti halnya plugin JQuery yang lainnya, plugin multiple-select mengharuskan pemanggilan library utama JQuery. Sementara itu untuk membuat obyek multiple select, gunakan perintah HTML biasa, yaitu dengan tag <select> dan <option>. Jangan lupa untuk menambahkan atribut ID pada tag <select> sebagai identitas dan selector di Jquery.

Perhatikan contoh sederhana program demo #1 berikut ini:

demo1.php   
  1. <html>
  2. <head>
  3. <title>JQuery Multiple Select</title>
  4. <script src="libs/jquery.min.js"></script>
  5. <script src="libs/jquery.multiple.select.js"></script>
  6. <link rel="stylesheet" href="libs/multiple-select.css"/>
  7. <script>
  8. $(document).ready(function(){
  9. $('#demo1').multipleSelect();
  10. });
  11. </script>
  12. </head>
  13. <body>
  14. <h1>JQuery Multiple Select Demo</h1>
  15. <h2>Demo #1 : Contoh Sederhana</h2>
  16. <form action="" method="post">
  17. <h3>Multiple Combobox tanpa Plugin</h3>
  18. <select id="demo1a" name="demo1a[]" multiple="multiple" style="width:200px">
  19. <option value="JKT">DKI Jakarta</option>
  20. <option value="BTN">Banten</option>
  21. <option value="JABAR">Jawa Barat</option>
  22. <option value="JATENG">Jawa Tengah</option>
  23. <option value="JATIM">Jawa Timur</option>
  24. <option value="DIY">DI Yogyakarta</option>
  25. </select>
  26. <h3>Multiple Combobox dengan Plugin JQuery Multiple-Select</h3>
  27. <select id="demo1" name="demo1[]" multiple="multiple" style="width:200px">
  28. <option value="JKT">DKI Jakarta</option>
  29. <option value="BTN">Banten</option>
  30. <option value="JABAR">Jawa Barat</option>
  31. <option value="JATENG">Jawa Tengah</option>
  32. <option value="JATIM">Jawa Timur</option>
  33. <option value="DIY">DI Yogyakarta</option>
  34. </select>
  35. </form>
  36. </body>
  37. </html>

Penjelasan Program Demo 1 di atas:

Baris 4 : Menyertakan library JQuery. Sesuaikan dengan lokasi library JQuery yang Anda gunakan. Anda juga dapat mengganti lokasi library dengan CDN dari Jquery yang beralamat di http://code.jquery.com/jquery.js
Baris 5 : Menyertakan plugin JQuery Multiple-Select
Baris 6 : Menyertakan file CSS plugin JQuery Multiple-Select. File CSS ini berfungsi untuk mengatur tampilan dari combobox.
Baris 8-10 : Memanggil fungsi multipleSelect() tanpa opsi tambahan untuk mengaktifkan plugin Jquery Multiple-Select pada obyek dengan ID #demo1.
Baris 18-25 : Perintah HTML untuk membentuk combobox multi-select. Perintah ini akan menampilkan combobox dimana kita dapat memilih lebih dari satu pilihan dengan menekan tombol Ctrl saat memilih. Ingat, untuk menjadikan suatu combobox menjadi multi-select, cukup menambahkan atribut multiple=”multiple” pada tag <select>. Tanpa atribut ini, combobox akan ditampilkan seperti combobox pada umumnya (hanya bisa dipilih 1 pilihan)
Baris 27-34 : Sama seperti baris 18-25, menampilkan combobox multi-select. Combobox yang kedua ini yang akan ditampilkan dengan plugin Jquery Multiple-Select. Bandingkan hasilnya dengan combobox pertama.

Dan berikut ini tampilan dari program demo #1 di atas.

Contoh demo 1: Implementasi JQuery Multiple-Select

Contoh demo 1: Implementasi JQuery Multiple-Select

Multiple-Select dengan Placeholder dan Filter (Pencarian)

Kita juga bisa menambahkan beberapa opsi (pilihan) pada plugin jquery multiple-select. Contohnya adalah penambahan Placeholder dan filter (pencarian). Placeholder merupakan keterangan yang muncul pada suatu form inputan dan akan hilang otomatis saat cursor berada pada form inputan tersebut. Sementara fitur pencarian sangat membantu pengguna untuk menemukan pilihan yang diinginkan, terutama dalam sebuah combobox dengan jumlah pilihan yang cukup banyak.

Perhatikan contoh demo #2 berikut ini.

demo2.php   
  1. <html>
  2. <head>
  3. <title>JQuery Multiple Select</title>
  4. <script src="libs/jquery.min.js"></script>
  5. <script src="libs/jquery.multiple.select.js"></script>
  6. <link rel="stylesheet" href="libs/multiple-select.css"/>
  7. <script>
  8. $(document).ready(function(){
  9. $('#demo2').multipleSelect({
  10. placeholder: "Pilih Propinsi",
  11. filter:true
  12. });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <h1>JQuery Multiple Select Demo</h1>
  18. <h2>Demo #2 : Combobox dengan Placeholder dan Filter</h2>
  19. <form action="" method="post">
  20. <h3>Multiple Combobox tanpa Plugin</h3>
  21. <select id="demo2a" name="demo2a[]" multiple="multiple" style="width:200px">
  22. <option value="JKT">DKI Jakarta</option>
  23. <option value="BTN">Banten</option>
  24. <option value="JABAR">Jawa Barat</option>
  25. <option value="JATENG">Jawa Tengah</option>
  26. <option value="JATIM">Jawa Timur</option>
  27. <option value="DIY">DI Yogyakarta</option>
  28. </select>
  29. <h3>Multiple Combobox dengan Plugin JQuery Multiple-Select</h3>
  30. <select id="demo2" name="demo2[]" multiple="multiple" style="width:200px">
  31. <option value="JKT">DKI Jakarta</option>
  32. <option value="BTN">Banten</option>
  33. <option value="JABAR">Jawa Barat</option>
  34. <option value="JATENG">Jawa Tengah</option>
  35. <option value="JATIM">Jawa Timur</option>
  36. <option value="DIY">DI Yogyakarta</option>
  37. </select>
  38. </form>
  39. </body>
  40. </html>

Program di atas pada dasarnya sama seperti program sebelumnya (demo 1). Perbedaannya adalah adanya penambahan opsi pada saat pemanggilan fungsi multipleSelect() seperti terlihat pada baris 8-13. Ada 2 opsi yang ditambahkan yaitu opsi “placeholder” yang berisi teks yang ditampilkan pada form, dan opsi “filter” yang jika diisi dengan “true” maka akan terdapat penambahan form untuk pencarian data pada combobox. Perhatikan tampilan program berikut ini.

Contoh Demo 2: JQuery Multiple-Select dengan Placeholder dan Filter

Contoh Demo 2: JQuery Multiple-Select dengan Placeholder dan Filter

Multiple-Select dengan Pilihan yang Diambil dari MySQL

Pada contoh sebelumnya, opsi pada combobox diatur langsung di HTML. Pada contoh berikut ini, kita akan coba mengisi combobox dengan opsi yang diambil dari database MySQL. Agar tidak terlalu rumit, kita akan menggunakan tabel “propinsi” yang terdiri dari 2 field yaitu kode dan nama propinsi. Struktur tabel propinsi selengkapnya sebagai berikut:

NO NAMA FIELD TIPE PANJANG

1

kode varchar 2
2 nama varchar 40

Gunakan PHPMyAdmin atau MySQL Client kesukaan Anda untuk mengimport struktur tabel propinsi beserta isinya dalam bentuk .sql yang dapat didownload di sini.

Setelah tabel propinsi beserta isi datanya telah siap, selanjutnya cobalah contoh program demo3.php berikut ini.

demo3.php   
  1. <?php
  2. #koneksi
  3. $conn = mysqli_connect("localhost", "root", "qwerty", "demo");
  4. #akhir-koneksi
  5.  
  6. #ambil data propinsi
  7. $query = "SELECT kode, nama FROM propinsi ORDER BY nama";
  8. $sql = mysqli_query($conn, $query);
  9. $arrpropinsi = array();
  10. while ($row = mysqli_fetch_assoc($sql)) {
  11. $arrpropinsi [ $row['kode'] ] = $row['nama'];
  12. }
  13. ?>
  14. <html>
  15. <head>
  16. <title>JQuery Multiple Select</title>
  17. <script src="libs/jquery.min.js"></script>
  18. <script src="libs/jquery.multiple.select.js"></script>
  19. <link rel="stylesheet" href="libs/multiple-select.css"/>
  20. <script>
  21. $(document).ready(function(){
  22. $('#demo3').multipleSelect({
  23. placeholder: "Pilih Propinsi",
  24. filter:true
  25. });
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <h1>JQuery Multiple Select Demo</h1>
  31. <h2>Demo #3 : Combobox dengan Placeholder dan Filter</h2>
  32. <form action="" method="post">
  33. <select id="demo3" name="demo3[]" multiple="multiple" style="width:300px">
  34. <?php
  35. foreach($arrpropinsi as $kode=>$nama) {
  36. echo "<option value='$nama'>$nama</option>";
  37. }
  38. ?>
  39. </select>
  40. <input type="submit" name="Pilih" value="Pilih"/>
  41. </form>
  42. <?php
  43. if(isset($_POST['Pilih'])) {
  44. echo "Propinsi yang Anda pilih: <br/>";
  45. echo implode(", ", $_POST['demo3']);
  46. }
  47. ?>
  48. </body>
  49. </html>

Pada contoh program yang ketiga diatas, terdapat beberapa penambahan code jika dibandingkan dengan program sebelumnya. Pilihan pada combobox tidak lagi dituliskan di dalam program secara langsung (HTML), tetapi diambil dari tabel propinsi yang berada di database MySQL. Berikut ini penjelasan singkat dari program di atas.

Baris 3 : Pertama program akan melakukan koneksi ke database MySQL. Disini kita menggunakan fungsi mysqli_connect() yang memiliki 4 (empat) parameter, yaitu hostname, username, password dan nama database yang digunakan.
Baris 6-12 : Mengambil data propinsi di tabel propinsi dan memasukkannya ke dalam variabel array $arrpropinsi. Perintah query yang digunakan adalah jenis perintah SELECT dan untuk menjalankan perintah query tersebut digunakan fungsi mysqli_query(). Sementara itu, fungsi mysqli_fetch_array() pada baris 10 digunakan untuk menangkap hasil perintah query dan memasukkannya ke dalam array.
Baris 21-26 : Memanggil fungsi multipleSelect() dengan opsi placeholder dan filter, untuk mengaktifkan plugin Jquery Multiple-Select pada obyek dengan ID #demo3.
Baris 35-39 : Menampilkan seluruh isi array $arrpropinsi ke dalam opsi combobox. Untuk menampilkannya menggunakan bentuk perulangan khusus foreach.
Baris 43-48 : Saat tombol Pilih ditekan, PHP akan menangkap pilihan combobox yang dipilih dan menampilkannya di layar.

Berikut ini tampilan hasil program demo3.php di atas.

Contoh Demo 3: Multiple-Select dengan Isi Data dari MySQL

Contoh Demo 3: Multiple-Select dengan Isi Data dari MySQL

Kesimpulan

Plugin JQuery Multiple-Select merupakan salah satu plugin yang cukup handal untuk “mempercantik” tampilan combobox sehingga lebih nyaman dari sisi pengguna. Beberapa kelebihan yang ditawarkan oleh plugin ini antara lain kemudahan dalam implementasinya, serta dukungan berbagai opsi / pilihan seperti placeholder dan pencarian (filter).

Download

Semoga tutorial ini bermanfaat untuk kita semua dan berbagilah hal baik ke sebanyak-banyaknya orang maka kebahagiaan akan menghampiri Anda. Satu Karya untuk Indonesia!

Referensi Terkait

Comments
  1. 9 months ago
  2. 7 months ago
  3. 4 months ago
  4. 2 months ago

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>