Flexdatalist - Plugin Autocomplete dengan
The HTML5 elemen sangat berguna dalam pembangunan frontend moden. Walau bagaimanapun, ia adalah satu daripada unsur-unsur yang tidak diketahui ramai pemaju.
Ia berfungsi pada medan input di mana anda boleh autosuggest nilai tertentu untuk input. Persediaan lalai kelihatan baik-baik saja dan kami telah menutup beberapa tip pengkodan untuk membina kesan sejuk dengan pemangkin autosuggest.
Walau bagaimanapun, ia lebih mudah untuk bekerjasama dengan plugin seperti Flexdatalist. Ia menyokong pelbagai penyemak imbas yang lebih luas dan membolehkan anda menyesuaikan sepenuhnya reka bentuk pemangkin anda.
Tidak semua orang mempunyai keperluan untuk ciri autocomplete dan dengan pemangkin HTML5 asli, anda mungkin tidak peduli dengan plugin. Walau bagaimanapun, Flexdatalist mungkin yang terbaik di luar sana kerana ia dibina atas tingkah laku pemangkin asli untuk menambah:
- Sokongan responsif mudah alih
- Penerangan tambahan untuk setiap item
- Pilihan untuk berbilang pilihan sekaligus
- Pengendali acara tersuai
Ia semua dikuasakan oleh jQuery, jadi anda akan memerlukan satu salinan versi terkini untuk mendapatkan ini berjalan. Ia juga datang dengan lembaran gaya CSS sendiri yang anda mungkin mahu bergabung menjadi satu fail CSS untuk mengurangkan permintaan HTTP.
Awak boleh cari arahan persediaan penuh pada halaman demo utama yang termasuk muat turun pautan ke fail Flexdatalist.
Ia sangat mudah untuk ditubuhkan, dengan hanya satu baris JavaScript. Secara lalai, plugin itu mensasarkan semua input dengan kelas .flexdatalist, jadi hanya menambah bahawa kod anda sepatutnya cukup untuk melihat keputusan.
Anda hanya menambah elemen di dalam medan input anda dan Flexdatalist mengendalikan yang lain. Ia akan senarai gaya auto, termasuk teks deskriptif pilihan.
Cara paling mudah untuk menambah teks tambahan ialah melalui fail JSON yang anda boleh lampirkan input anda melalui atribut data.
Contohnya, jika anda menyemak halaman demo Flexdatalis, anda akan dapati “Negara” medan input dengan atribut data-data = 'countries.json'. Rujukan ini fail jauh itu menyimpan semua data input mentah secara luaran.
Terlalu banyak bidang ini yang anda boleh melambatkan halaman sedikit. Walau bagaimanapun, saya tidak dapat bayangkan banyak laman web akan menjalankan lebih daripada beberapa bentuk pemangkin ini pada satu halaman, apatah lagi dengan plugin jQuery ini, mereka masih cukup cepat.
Untuk bermula, hanya lawati repo GitHub dan muat turun satu salinan. Ini termasuk a pautan ke halaman demo utama yang juga mempunyai dokumentasi penuh untuk persediaan, pilihan JavaScript, dan banyak coretan kod sampel untuk dikunjungi.
