Membuat elemen CSS Select bisa untuk pencarian

Advertisement

Advertisement

             Apa anda sudah pernah mencoba kode program ini ?, mungkin diantara anda pastinya ada yang sudah mengetahui dan ada yang belum mengetahui kode tersebut. Untuk itu disinilah kita akan membahas tentang cara membuatnya dan cara penerapanya pada web yang kita kelola .

Apa ini menggunakan plugin ? Ya, elemen select bisa melakukan pencarian ini menggunakan plugin yang bernama Select2 . Biasanya kita membuat sebuah elemen HTML Select yang hanya menampilkan Optionya saja bukan ?, kini kita bisa membuatnya disertai melakukan pencarian. Jadi, kita bisa melakukan pencarian pada value Optionnya.

Bagaimana ?, Sangat keren ? Ingin mencoba ?

Untuk kode / file versi fullnya, bisa anda unduh disini dan ekstrak menggunakan winrar, 7zip atau semacamnya .

Hal pertama yang kita lakukan adalah menginclude sebuah file JQuery atau juga bisa anda baca Pengertian JQuery dan fungsinya . Lalu, include file yang harus diperlukan dalam pembuatan elemen Select2, penulisanya seperti berikut :

<link href="path/to/select2.min.css" rel="stylesheet"></link>
<script src="path/to/select2.min.js"></script>

Untuk semua file kodenya bisa anda unduh di website si pembuatnya : https://select2.github.io/ .

Jika semua file yang harus di include sudah di pasang, sekarang kita tinggal membuat elemen select, kodenya seperti berikut :

<select name="" class="pilih2" >
<option value="jawa timur">Jawa timur</option>
<option value="jawa tengah">Jaa tengah</option>
<option value="jawa barat">Jawa barat</option>
</select>

Jangan lupa anda kasih value pada sebuah Option, jika tidak dikasih value maka elemen select2 ini tidak akan berjalan . Sebab, elemen select2 ini saat melakukan pencarian mengambil value pada Option .

Taruh sedikit file JS berikut :

<script type="text/javascript">
$(function(){
$(".pilh2").select2();
});
</script>

Memahami apa itu Selector pada JQuery .

Jika anda ingin menambah fiturnya yang lain, bisa anda kunjungi file example berikut : https://select2.github.io/examples.html . Bisa anda gunakan untuk kebutuhan anda yang berhubungan dengan elemen select,

Silahkan terapkan dan lakukan eksperimen pada website pribadi atau professional anda .

Semoga bermanfaat .

Advertisement

Advertisement