Tuesday, June 7, 2016

Kategori:

Tutorial HTML : Belajar Membuat Select Dengan Select2

html



Pada postingan kali ini, tobiweb akan share tutorial belajar membuat select dengan Select2, Ini juga bisa disebut sebagai dukumentasi Select2 versi bahasa indonesia. masih dengan edisi mengulik source code yang ada di github, Select2 ini ialah opensource yang ada di github. Sobat semua sudah pernah mengenal apa itu select2 belum ? Select2 ialah fitur baru untuk mempermudah tampilan website sobat, Select2 itu selectbox yang support dengan berbagai fitur, diantaranya fitur searching, taging, remote data set, scroling, ajax select, multiple select dan masih banyak fitur yang dibangun dengan option lainnya. Fitur yang paling keren di select2 ini ialah terdapat fitur searching untuk mecari option, ketika kita mengetik kata "Indo" maka daftar negara yang terdapat kata "Indo" akan muncul.

Bagaimana memulai menggunakan select2 ?

Untuk menggunakan select2 sobat perlu mengincludekan javascript dan cssnya,sobat bisa download terlebih dahulu lalu taruh di folder project sobat atau juga bisa mengambil langsung melalui CDN.

Menggunakan Select2 melalui CDN

cara menggunakannya ialah sebagai berikut ini :

1. Include link source javascript dan css diatas tag </head> pada scipt HTML sobat.



2. Untuk mengidentifikasi silahkan sobat buat javascript di bagian bawah.



3. Berikut ini contoh lengkapnya, silahkan copy dan pastekan di texteditor sobat, lalu buka di web browser sobat. Contoh


Menggunakan Select2 melalui local :


1. Download code dari github dan silahkan taruh di folder direktori project sobat.

2. Include link source javascript dan css diatas tag </head> pada scipt HTML sobat.

3. Berikut ini contoh lengkapnya, silahkan copy dan pastekan di texteditor sobat, lalu buka di web browser sobat. Contoh

Sekian postingan tentang mengulik source code. opensource code Belajar Membuat Select dengan Select2, dengan adanya select2 ini sobat dapat memperindah tampilan website sobat. Selamat belajar.

Untuk panduan dan source code full silahkan sobat bisa download : Download ZIP

Contoh Select2 dan Ajax dengan PHP

Tutorial ini pernah saya temui di stackoverflow, yaitu bagai mana jika contohnya menggunakan ajax dan php.

1. Buatlah select, tentukan nama id. 

<select id="select_proj" style="width:10em">
  <option value="" selected="selected">Search</option>
</select>
2. Buat lah script javascriptnya dengan code dibawah ini. arahkan ke select_prj.php

$('select').select2();
        $("#select_proj").select2({
          ajax: {
              url: '../app/select_prj.php',
            dataType: 'json',
            delay: 250,
            data: function (term, page) {
              return {
                  term: term, // search term
                  page: 10
              };
            },
            processResults: function (data, page) {
              return {
                results: data.items
              };
            },
            cache: true
          },
          escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
          minimumInputLength: 1,
        });
Demikian artikel tentang  pengenalan menggunakan Select2, nantikan update berikutnya.

Tags : #belajar Select2 #select2 example #select2 ajax #select2 js #select2 read only #select2 jquery #select2 documentation #select2 kartik #select2 disabled

Tobi Muhammad

Author & Editor

Tobi (Muhammad Tobi) adalah seorang Tukang Masak di perusahaan startup, suka sekali menulis dan mempelajari source code open source lisensi GNU di Github dll. Bisa pemrogramman web karena sering belajar dari contoh program yang ada di Github dll. Anak desa yang hanya lulusan Paket C.

2 comments:

  1. Tags : #belajar Select2 #select2 example #select2 ajax #select2 js #select2 read only #select2 jquery #select2 documentation #select2 kartik #select2 disabled

    ReplyDelete
  2. broh mau tanya.... punya data2 wilayah indonesia ngg ? jadi bisa dibikin select2 gitu

    ReplyDelete

 

News Letters

Subscribe here to get our newsletter in your inbox, it is safe and EASY!

Tobi Web Indonesia