Menggunakan Jquery Chosen

Ditulis oleh Danni Moring 01 Januari 2014

Wah ini postingan di awal tahun 2014 ya, sebenarnya ga ada niat sih harus posting pas awal tahun 2014. Tapi berhubung saya mendadak ga bisa tidur karena banyaknya suara petasan, beneran kayak lagi di medan perang. Sahut-sahutann suaranya, ditambah lagi kayak ada suara meriam. Rada mendem tapi kencang. Plus kayak suasana lagi nonton bola juga, banyak suara terompet yang bersahut-sahutan.

Nah untuk menunggu diam dulu suara itu jadinya saya iseng-iseng saja catat ini, tentang jquery chosen. Jquery chosen itu sebenarnya boleh dibilang plugin untuk select option di form. Tapi enaknya dia bisa ngetik nama option nya jika optionnya banyak pilihannya. Nah download dulu plug in nya disini. Versi yang saya pakai yaitu chosen v1.0.0. Nah catatan ini sangat dasar sekali untuk chosen. Jadi cuma menggunakannya doang. Sebenarnya kalau download sih contohnya udah ada. Tapi ini saya buat saja catatan tersendiri.

Nah biasanya kalau select option itu tanpa plugin kan seperti ini gambarnya

Sementara contoh dari chosen itu kayak gini

Oke langsung saja ke code nya ya.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chosen #1</title>
<link rel="stylesheet" href="js/chosen.min.css">
</head>
<body>
  <form>
   <p> Normal select </p>
   <select id="npropinsi" style="width:200px">
      <option value=""></option>
      <option value="DKI Jakarta">DKI Jakarta</option>
     <option value="Sumatera Barat">Sumatera Barat</option>
     <option value="D.I Aceh">D.I Aceh</option>
     <option value="Sumatera Utara">Sumatera Utara</option>
     <option value="Jambi">Jambi</option>
     <option value="Bangka Belitung">Bangka Belitung</option>
     <option value="Bengkulu">Bengkulu</option>
     <option value="Lampung">Lampung</option>
     <option value="Banten">Banten</option>
     <option value="Jawa Barat">Jawa Barat</option>
     <option value="Jawa Tengah">Jawa Tengah</option>
     <option value="D.I Yogyakarta">D.I Yogyakarta</option>
     <option value="Jawa Timur">Jawa Timur</option>
     <option value="Bali">Bali</option>
     <option value="Kalimantan Barat">Kalimantan Barat</option>
   </select>
   <p> Single </p>
   <select data-placeholder="- Pilih Propinsi -" id="propinsi" style="width:200px">
     <option value=""></option>
     <option value="DKI Jakarta">DKI Jakarta</option>
     <option value="Sumatera Barat">Sumatera Barat</option>
     <option value="D.I Aceh">D.I Aceh</option>
     <option value="Sumatera Utara">Sumatera Utara</option>
     <option value="Jambi">Jambi</option>
     <option value="Bangka Belitung">Bangka Belitung</option>
     <option value="Bengkulu">Bengkulu</option>
     <option value="Lampung">Lampung</option>
     <option value="Banten">Banten</option>
     <option value="Jawa Barat">Jawa Barat</option>
     <option value="Jawa Tengah">Jawa Tengah</option>
     <option value="D.I Yogyakarta">D.I Yogyakarta</option>
     <option value="Jawa Timur">Jawa Timur</option>
     <option value="Bali">Bali</option>
     <option value="Kalimantan Barat">Kalimantan Barat</option>
   </select>
   <p>Multiple </p>
   <select data-placeholder="- Pilih Propinsi -" id="mpropinsi" multiple style="width:200px">
<option value=""></option>
      <option value="DKI Jakarta">DKI Jakarta</option>
     <option value="Sumatera Barat">Sumatera Barat</option>
     <option value="D.I Aceh">D.I Aceh</option>
     <option value="Sumatera Utara">Sumatera Utara</option>
     <option value="Jambi">Jambi</option>
     <option value="Bangka Belitung">Bangka Belitung</option>
     <option value="Bengkulu">Bengkulu</option>
     <option value="Lampung">Lampung</option>
     <option value="Banten">Banten</option>
     <option value="Jawa Barat">Jawa Barat</option>
     <option value="Jawa Tengah">Jawa Tengah</option>
     <option value="D.I Yogyakarta">D.I Yogyakarta</option>
     <option value="Jawa Timur">Jawa Timur</option>
     <option value="Bali">Bali</option>
     <option value="Kalimantan Barat">Kalimantan Barat</option>
   </select>
  </form>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
  <script src="js/chosen.jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
   $("#propinsi").chosen(
     {no_results_text: "Tidak ditemukan....!"}
   );
   $("#mpropinsi").chosen(
     {no_results_text: "Tidak ditemukan....!"}
  );
  </script>
</body>
</html>

Yang perlu dipakai yaitu, chosen.css dan chosen.jquery.js. Nah boleh juga versi minified nya supaya lebih ringan karena sudah di kompres, yaitu pake chosen.min.css dan chosen.jquery.min.js. Tinggal permainan letak foldernya saja sesuaikan. Bisa dilihat contohnya disini udah saya upload.

Mungkin catatan ini cuma segini aja, kurang lebihnya ya mohon maaf. Nanti rencananya mau buat catatan tentang select chain pake jquery chosen ini. Jadi dia ngeload ambil dari database ketika select option lainya di pilih. Misalnya select propinsi dipilih DKI Jakarta, maka nanti select kota/kabupatennya akan khusus ngeload atan tampilkan kota/kabupaten di Jakarta saja.