Jadi, saya punya kode berikut untuk kotak dropdown yang dibuat dengan bootstrap:
Land
- België/Belgique
- Deutschland
- France
- Nederland
- United Kingdom
Sekarang saya ingin membuatnya diperlukan untuk memilih sesuatu dari kotak dropdown ini sebelum Anda dapat melanjutkan. Saya sudah melakukan ini untuk kotak teks dan tombol radio dengan hanya menambahkan diperlukan ke tag, tapi saya tidak memiliki tag seperti itu di sini, jadi bagaimana cara melakukannya?
Jika kita hanya memasukkan yang diperlukan dalam tag pilih dan None dalam opsi itu akan berfungsi untuk validasi. Saya telah merujuk halaman ini .
Ini bekerja untuk seleksi harus dibuat di antara nilai yang disediakan.
Tetapi saya ingin tahu cara menulis pesan validasi khusus yang datang secara default seperti pesan ini.?
None
Volvo
Saab
Mercedes
Audi
Kode di atas berfungsi dengan baik untuk validasi seperti "Memilih item dalam daftar sebelum mengirim".
Bisakah Anda menggunakan elemen select sebagai gantinya dan menerapkan tag yang diperlukan?
België/Belgique
Deutschland
France
Nederland
United Kingdom
Lihat pertanyaan SO ini khususnya.
A
A
A
silakan setel diperlukan = "wajib" di pemilih Anda
Gunakan kode ini jika Anda ingin agar Bootstrap drop down pilih
Select
Yes
No
Kebutuhan dalam aplikasi berbasis web sudah mulai memperhatikan interaksi pengguna secara optimal. Pada masa yang lalu mungkin paradigma aplikasi web berfokus pada apa yang bisa dilakukan untuk mengakomodir kebutuhan pengguna. Namun dimasa sekarang ini,
hampir dapat dikatakan bahwa semua kebutuhan pengguna telah terakomdir. Sekarang dengan kondisi seperti itu kenyamanan pengguna dalam menggunakan aplikasi web menjadi hal utama yang mungkin harus lebih serius diperhatikan.
Dalam tutorial kali ini kita membahas mengenai satu komponen input dalam html yang mungkin sudah kita kenal yaitu SELECT. SELECT mempunyai sintaks dasar sebagai berikut:
string 1 string 2 ... string n
Dimana sintaks diatas akan menghasilkan tampilan combobox yang telah kita kenal. Pada dasarnya tidak ada yang salah dengan hal tersebut. Namun pernahkah kita berpikir mengenai data? Kadang kala kita hanya fokus pada task yang terlalu kaku dimana pemikiran yang penting datanya tampil dalam bentuk combo box/select box “selesai”. Selesai dalam tanda kutip tentu pada saat aplikasi tersebut selesai diproduksi atau compile. Nah jika kita juga berpikir pada saat diimplementasi ternyata data di dalam select box tersebut menjadi sangat banyak? Bukankah hal ini menjadikan pengguna tidak nyaman dalam menggunakannya? Apalagi sekarang gadget berbasis mobile telah menjangkau banyak pengguna dimana bisa saja pengguna mobile menjadi pengguna terbesar dalam mengakses suatu aplikasi web. Dapat kebayang bagaimana repotnya bukan jika harus melakukan scroll melalui select box dengan jumlah data yang banyak.
Tentu saja ada solusi untuk masalah tersebut. Dalam artikel ini kita akan menggunakan bootstrap select yang dapat mengakomodir kebutuhan tersebut dengan sangat mudah. Hal ini dapat dilakukan dengan beberapa langkah saja sehingga konsep yang tadinya hanya dibicarakan/bahas dapat terlaksana dan berjalan dengan optimal.
Oke mari kita bahas satu persatu. Untuk kasus saat ini adalah bagaimana memilih kota yang ada di Indonesia dengan menggunakan Bootstrap Select.
1. Langkah pertama siapkan terlebih dahulu datanya
Pada tutorial ini kita menggunakan data nama nama ibu kota provinsi yang ada di Indonesia. Data yang digunakan hanya beberapa sampel data, untuk data lengkapnya dapat di tambahkan sendiri
2. Pemanggilan css untuk bootstrap select
3. Pemanggilan javascript untuk bootstrap select
4. Pembuatan Form Standar untuk mencari nama kota
Cari Nama Ibu Kota Provinsi:Jakarta Banda Aceh Medan Padang Pekanbaru Jambi Pelembang Bengkulu Bandar Lampung Pangkalpinang Tanjungpinang Bandung Semarang Yogyakarta Surabaya Serang Denpasar Mataram Kupang Pontianak Palangka Raya Banjarmasin Samarinda Tanjung Selor Manado Palu Makassar Kendari Gorontalo Mamuju Ambon Sofifi Jayapura Manokwari
Poin utama dalam pembuatan select search ini adalah pada tag select kita tambahkan atribut class dan data-live-search agar css dan js dari bootstrap select dapat bekerja
5.
Gabungkan ke tiga langkah diatas menjadi satu kesatuan dengan format html lengkap sehingga menghasilkan output sebagai berikut
Bagaimana cukup mudah bukan? Selamat mencoba ya
Download SOurce
Labels: Bootstrap, Select, Tutorial, Web
Terima kasih telah membaca Membuat Pencarian Dalam Select Dengan Bootstrap Select. Bila bermanfaat boleh di share yah :]