Flexdatalist - Plugin Autocomplete dengan Dukungan
Itu HTML5 elemen cukup berguna dalam pengembangan frontend modern. Namun, ini adalah salah satu elemen yang tidak banyak diketahui pengembang.
Ini berfungsi pada bidang input di mana Anda bisa menyarankan nilai tertentu untuk input. Pengaturan default terlihat baik-baik saja dan kami telah membahas beberapa tips pengkodean untuk membangun efek keren dengan datalists autosuggest.
Namun, itu jauh lebih mudah bekerja dengan sebuah plugin seperti Flexdatalist. Saya t mendukung beragam browser dan memungkinkan Anda untuk sepenuhnya menyesuaikan desain datalist Anda.
Tidak semua orang memiliki kebutuhan untuk fitur autocomplete dan dengan datalists HTML5 asli, Anda mungkin tidak perlu repot-repot dengan plugin. Namun, Flexdatalist mungkin yang terbaik di luar sana karena itu dibangun di atas perilaku datalis asli menambahkan:
- Dukungan responsif seluler
- Deskripsi tambahan untuk setiap item
- Opsi untuk beberapa pilihan sekaligus
- Penangan acara khusus
Nya semua didukung oleh jQuery, jadi kamu akan perlu salinan versi terbaru untuk menjalankan ini. Juga hadir dengan stylesheet CSS sendiri yang mungkin ingin Anda gabungkan menjadi satu file CSS untuk mengurangi permintaan HTTP.
Kamu dapat menemukan petunjuk pengaturan penuh di halaman demo utama yang termasuk tautan unduhan ke file Flexdatalist.
Ini sangat sederhana untuk diatur, dengan hanya satu baris JavaScript. Secara default, plugin menargetkan semua input dengan kelas .flexdatalist, jadi hanya menambahkan itu ke kode Anda harus cukup untuk melihat hasilnya.
Anda tinggal menambahkan elemen di dalam bidang input Anda dan Flexdatalist menangani sisanya. Itu akan gaya otomatis daftar, termasuk teks deskriptif opsional.
Cara paling sederhana untuk menambahkan teks tambahan adalah melalui file JSON yang kamu bisa lampirkan ke input Anda melalui atribut data.
Misalnya, jika Anda memeriksa halaman demo Flexdatalist Anda akan menemukan “Negara” bidang input dengan atribut data-data = 'countries.json'. Ini merujuk ke file jarak jauh itu menyimpan semua data input mentah secara eksternal.
Terlalu banyak bidang yang Anda bisa memperlambat halaman sedikit. Namun, saya tidak dapat membayangkan banyak situs akan menjalankan lebih dari beberapa formulir datalist ini pada satu halaman, belum lagi dengan plugin jQuery ini, mereka masih cukup cepat.
Untuk memulai, cukup kunjungi repo GitHub dan unduh salinannya. Ini termasuk a tautan ke halaman demo utama yang juga memiliki dokumentasi lengkap untuk pengaturan, opsi JavaScript, dan banyak cuplikan kode sampel untuk digunakan.
