Beranda Web Programming Membuat Select Option Dengan Search Box (Pencarian Dalam Select)
Membuat Select Option Dengan Search Box (Pencarian Dalam Select)
Selamat datang di blog kami. Apakah teman-teman pernah menjumpai sebuah form dropdown yang dilengkapi dengan search box (kotak pencatian) di dalamnya? Pada tutorial kali ini kami akan memberikan cara membuat form tersebut. Pada dasarnya terdapat beberapa plugins yang bisa digunakan, 3 diantaranya adalah select2 , chosen , dan selectize . Namun di sini kami akan mencontohkan dengan menggunakan select2.
Siapkan plugin select2 dengan mengunduh di websitenya , jika tidak mau mengunduh maka bisa menggunakan online plugins. Panggil CSS untuk select2.
Panggil javascript untuk select2
< script src = "https://code.jquery.com/jquery-3.4.1.js" integrity = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin = "anonymous" > </ script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js" > </ script >
< form method = "POST" >
< select id = "provinsi" name = "provinsi" >
< option value = "ACEH" > ACEH </ option >
< option value = "RIAU" > RIAU </ option >
< option value = "JAMBI" > JAMBI </ option >
< option value = "SUMATERA UTARA" > SUMATERA UTARA </ option >
< option value = "BENGKULU" > BENGKULU </ option >
< option value = "LAMPUNG" > LAMPUNG </ option >
< option value = "DKI JAKARTA" > DKI JAKARTA </ option >
< option value = "JAWA BARAT" > JAWA BARAT </ option >
< option value = "JAWA TENGAH" > JAWA TENGAH </ option >
< option value = "JAWA TIMUR" > JAWA TIMUR </ option >
</ select >
</ form >
Atur select2 agar terbaca di select option.
< script type = "text/javascript" >
$( document ).ready( function ( {
$( '#provinsi' ).select2();
});
</ script >
Ket: Select2 akan terpasang di atrribut dengan id = provinsi
Sehingga source code lengkapnya sebagai berikut:
<!DOCTYPE html>
< html >
< head >
< title > Select2 </ title >
< link href = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel = "stylesheet" />
< script src = "https://code.jquery.com/jquery-3.4.1.js" integrity = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin = "anonymous" > </ script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js" > </ script >
</ head >
< body >
< form method = "POST" >
< select id = "provinsi" name = "provinsi" >
< option > </ option >
< option value = "ACEH" > ACEH </ option >
< option value = "RIAU" > RIAU </ option >
< option value = "JAMBI" > JAMBI </ option >
< option value = "SUMATERA UTARA" > SUMATERA UTARA </ option >
< option value = "BENGKULU" > BENGKULU </ option >
< option value = "LAMPUNG" > LAMPUNG </ option >
< option value = "DKI JAKARTA" > DKI JAKARTA </ option >
< option value = "JAWA BARAT" > JAWA BARAT </ option >
< option value = "JAWA TENGAH" > JAWA TENGAH </ option >
< option value = "JAWA TIMUR" > JAWA TIMUR </ option >
</ select >
</ form >
< script type = "text/javascript" >
$( document ).ready( function ( {
$( '#provinsi' ).select2();
});
</ script >
</ body >
</ html >
Untuk demo bisa dilihat di link berikut:
DEMO
){kind=link}
0 Komentar