Kawalan autokomplet ringan dengan Datalist HTML5-tutorial css-php.cn

Kawalan autokomplet ringan dengan Datalist HTML5

Dalam tutorial ini, kami akan mengambil menyelam ke dalam elemen HTML5 yang sedikit digunakan. Ia boleh melaksanakan kawalan bentuk autokomplet yang ringan, boleh diakses, silang penyemak imbas yang tidak memerlukan JavaScript.

Takeaways Key

` menawarkan penyelesaian ringan, boleh diakses, dan silang penyemak imbas untuk kawalan bentuk autokomplete tanpa bergantung pada JavaScript. tidak seperti ``, `` lebih praktikal untuk mengendalikan sejumlah besar pilihan dan membolehkan pengguna memasukkan nilai tersuai yang tidak disenaraikan dalam pilihan yang telah ditetapkan.
` adalah teguh dalam pelayar moden termasuk Internet Explorer 10 dan 11, dengan pilihan sandaran yang tersedia untuk pelayar yang lebih tua menggunakan gabungan ` elemen `
` untuk mengisi pilihan secara dinamik berdasarkan input pengguna, meningkatkan fungsi dan pengalaman pengguna dalam aplikasi yang memerlukan maklum balas data masa nyata.
Apa yang salah dengan ?

Control adalah ideal apabila anda mahu pengguna memilih dari pelbagai pilihan kecil. Mereka kurang praktikal apabila:

Terdapat banyak pilihan, seperti negara atau tajuk pekerjaan

Pengguna mahu memasukkan pilihan mereka sendiri yang tidak ada dalam senarai

Penyelesaian yang jelas adalah kawalan autocomplete. Ini membolehkan pengguna memasukkan beberapa aksara, yang menghadkan pilihan yang tersedia untuk pemilihan yang lebih cepat.

akan melompat ke lokasi yang betul ketika anda mula menaip, tetapi itu tidak selalu jelas. Ia tidak akan berfungsi pada semua peranti (seperti skrin sentuh), dan ia diset semula dalam satu atau dua saat.

pemaju sering berpaling kepada salah satu daripada penyelesaian berkuasa JavaScript, tetapi kawalan autocomplete tersuai tidak selalu diperlukan. Elemen HTML5 adalah ringan, boleh diakses, dan tidak mempunyai ketergantungan JavaScript. Anda mungkin pernah mendengarnya kereta atau kekurangan sokongan. Itu tidak benar pada tahun 2021, tetapi terdapat ketidakkonsistenan dan peringatan penyemak imbas.

permulaan cepat

Memilih negara anda dari senarai yang mengandungi lebih daripada 200 pilihan adalah calon yang ideal untuk kawalan autocomplete. Tentukan dengan kanak -kanak unsur untuk setiap negara secara langsung di halaman HTML:

ID DataList kemudiannya boleh dirujuk oleh atribut senarai di mana -mana medan:

membingungkan, lebih baik untuk menetapkan autocomplete = "off". Ini memastikan pengguna ditunjukkan nilai dalam tetapi bukan nilai yang mereka masukkan sebelum ini dalam penyemak imbas.

Hasilnya:

Kawalan autokomplet ringan dengan Datalist HTML5

Ini adalah rendering lalai di Microsoft Edge. Aplikasi lain melaksanakan fungsi yang sama, tetapi rupa berbeza di seluruh platform dan penyemak imbas.

Options

Menggunakan label sebagai anak teks adalah perkara biasa:

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

Menggunakan atribut nilai menghasilkan hasil yang sama:

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

Salin selepas log masuk

Nota: penutup /> slash adalah pilihan dalam HTML5, walaupun ia dapat membantu mencegah kesilapan pengekodan.

anda juga boleh menetapkan nilai mengikut label yang dipilih menggunakan salah satu daripada format berikut.

Opsyen 1:

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

Opsyen 2:

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span> value<span>="label one"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label two"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label three"</span> /></span>
</span><span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

Dalam kedua -dua kes, medan input ditetapkan kepada 1, 2 atau 3 apabila pilihan yang sah dipilih, tetapi UI bervariasi di seluruh pelayar:

Contoh codepen berikut menunjukkan semua variasi:

Lihat pena

html5 contoh autocomplete oleh sitePoint (@sitePoint)
pada codepen.

Pelaksanaan akan berubah tetapi, buat masa ini, saya akan menasihatkan anda tidak menggunakan nilai dan label kerana ia mungkin mengelirukan pengguna.

(penyelesaian dibincangkan di bawah.)

Sokongan dan penolakan pelayar

elemen disokong dengan baik dalam pelayar moden serta Internet Explorer 10 dan 11:

Terdapat beberapa nota pelaksanaan, tetapi mereka tidak akan menjejaskan kebanyakan penggunaan. Yang terburuk yang boleh berlaku ialah medan kembali ke input teks standard. Jika anda benar -benar mesti menyokong IE9 dan di bawah, terdapat corak sandaran yang menggunakan standard bersempena dengan input teks apabila gagal. Mengadaptasi contoh negara: Kawalan autokomplet ringan dengan Datalist HTML5

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

Lihat pena
html5 AutoComplete Fallback oleh SitePoint (@SitePoint)
pada codepen.

Dalam pelayar moden, unsur -unsur menjadi sebahagian daripada label "atau lain -lain" tidak ditunjukkan. Ia kelihatan sama dengan contoh di atas, tetapi nilai borang countrySelect akan ditetapkan ke rentetan kosong.

di IE9 dan ke bawah, kedua -dua medan (sangat panjang)

Kawalan autokomplet ringan dengan Datalist HTML5

Kedua -dua nilai boleh dimasukkan dalam IES lama. Permohonan anda mesti sama ada:

Menggunakan pada kawalan bukan teks

pelayar berasaskan krom juga boleh memohon nilai kepada:

input dengan jenis "tarikh". Pengguna boleh memilih dari pelbagai pilihan yang ditakrifkan sebagai nilai YYYY-MM-DD tetapi dibentangkan dalam format locale mereka.
input dengan jenis "warna". Pengguna boleh memilih dari pilihan pilihan warna yang ditakrifkan sebagai nilai hex enam digit (nilai tiga digit tidak berfungsi).
input dengan jenis "julat". Slider menunjukkan tanda semak, walaupun ini tidak mengehadkan nilai mana yang boleh dimasukkan.

Lihat pen

html5 pada jenis input lain oleh sitePoint (@sitePoint)
pada codepen.

CSS Styling

Jika anda pernah berjuang dengan gaya box,

... anda mudah!

An boleh digayakan seperti biasa, tetapi dan anak -anaknya tidak boleh digayakan dalam CSS. Senarai rendering sepenuhnya ditentukan oleh platform dan penyemak imbas.

Saya harap keadaan ini bertambah baik, tetapi buat masa ini, penyelesaian dicadangkan di MDN yang:

seperti

supaya ia dapat digayakan dalam CSS

mereplikasi semua fungsi autocomplete dalam JavaScript

Saya telah meningkatkannya lebih jauh dan kodnya boleh didapati di GitHub. Untuk menggunakannya, muatkan skrip di mana sahaja di halaman HTML anda sebagai modul ES6. URL CDN JSDELIVR boleh digunakan:

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

atau anda boleh memasangnya dengan NPM jika anda menggunakan bundler:

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

Salin selepas log masuk

elemen anda mesti menggunakan format . Contohnya:

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

NOTA: tidak boleh digunakan, kerana ia menghasilkan elemen kosong yang tidak boleh digayakan!

CSS kemudiannya boleh ditambah kepada gaya beberapa atau semua dan elements. Contohnya:

Contoh:

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span> value<span>="label one"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label two"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label three"</span> /></span>
</span><span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

Lihat pena

html5 Autocomplete CSS Styling oleh SitePoint (@SitePoint)

pada codepen.

kerja gaya, tetapi adakah ia bernilai usaha?

Saya mengesyaki tidak ...

Mengadakan semula papan kekunci, tetikus, dan kawalan sentuhan standard pelayar dengan akses yang munasabah adalah sukar. Contoh MDN tidak menyokong peristiwa papan kekunci dan, sementara saya cuba memperbaikinya, pasti ada masalah pada beberapa peranti.

Anda bergantung pada 200 baris JavaScript untuk menyelesaikan masalah CSS. Ia diminimumkan kepada 1.5kb, tetapi boleh memperkenalkan isu -isu prestasi jika anda memerlukan banyak elemen panjang pada halaman yang sama.
Jika JavaScript adalah keperluan, adakah lebih baik untuk menggunakan komponen JavaScript yang lebih cantik, lebih konsisten, diuji?
Kawalan jatuh kembali ke standard HTML5 tanpa gaya apabila JavaScript gagal, tetapi itu manfaat kecil.

Membuat Ajax-Enhanced

Menganggap pereka anda dengan senang hati menerima perbezaan gaya penyemak imbas, mungkin untuk meningkatkan fungsi standard menggunakan JavaScript. Contohnya:

Melaksanakan pengesahan pilihan yang hanya menerima nilai yang diketahui dalam .

tetapkan elemen dari data yang dikembalikan oleh panggilan Ajax untuk mencari API.

Tetapkan nilai medan lain apabila pilihan dipilih. Sebagai contoh, memilih "Amerika Syarikat" menetapkan "kami" dalam input tersembunyi.

elemen, walaupun terdapat beberapa pertimbangan pengekodan:

Permintaan AJAX API hanya boleh berlaku sebaik sahaja bilangan aksara minimum telah dimasukkan.
peristiwa menaip hendaklah Debounce . Iaitu, panggilan Ajax hanya dicetuskan apabila pengguna berhenti menaip sekurang -kurangnya setengah saat.
Hasil pertanyaan hendaklah di -cache supaya tidak perlu mengulangi atau menghuraikan panggilan yang sama.
Pertanyaan yang tidak perlu harus dielakkan. Sebagai contoh, memasuki "un" mengembalikan 12 negara. Tidak perlu membuat panggilan Ajax lebih lanjut untuk "unit" atau "bersatu" kerana semua pilihan yang dihasilkan terkandung dalam 12 hasil asal.

Saya telah mencipta komponen web standard untuk ini, dan kod tersebut boleh didapati di GitHub. Contoh codepen di bawah membolehkan anda memilih negara yang sah selepas memasuki sekurang -kurangnya dua aksara. Seorang artis muzik autocomplete kemudian mengembalikan artis yang berasal dari negara itu dengan nama yang sepadan dengan rentetan carian:

Lihat pen
html5 dengan Ajax AutoComplete oleh SitePoint (@SitePoint)
pada codepen.

API melihat negara disediakan oleh restcountries.eu.
API Look-Up Artis Muzik disediakan oleh MusicBrainz.org.

Untuk menggunakannya dalam aplikasi anda sendiri, muatkan skrip di mana sahaja di halaman HTML anda sebagai modul ES6. URL CDN JSDELIVR boleh digunakan:

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

atau anda boleh memasangnya dengan NPM jika anda menggunakan bundler:

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

Salin selepas log masuk

Buat elemen dengan kanak-kanak untuk digunakan sebagai medan kemasukan data. Sebagai contoh, carian negara menggunakan ini:

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

atribut elemen:

atribut Keterangan API URL API yang lain (diperlukan) hasildata Nama harta yang mengandungi pelbagai hasil objek dalam API JSON yang dikembalikan (tidak diperlukan jika hanya hasil yang dikembalikan) Hasilnya Nama harta dalam setiap objek hasil yang sepadan querymin Bilangan minimum aksara untuk dimasukkan sebelum carian dicetuskan (lalai: 1) InputDelay masa minimum untuk menunggu di milisaat antara kekunci sebelum carian berlaku (debounce lalai: 300) OptionMax Bilangan maksimum pilihan autokomplete untuk dipaparkan (lalai: 20) sah Sekiranya ditetapkan, mesej ralat ini ditunjukkan apabila nilai tidak sah dipilih

URL selebihnya mesti mengandungi sekurang -kurangnya satu pengecam $ {id}, yang digantikan oleh nilai yang ditetapkan dalam dengan ID itu. Dalam contoh di atas, $ {Country} dalam URL API merujuk nilai pada kanak -kanak , yang mempunyai ID "negara". URL biasanya akan menggunakan input kanak -kanak, tetapi mana -mana bidang lain di halaman boleh dirujuk.

API restcountries.eu mengembalikan objek tunggal atau pelbagai objek yang mengandungi data negara. Contohnya:

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Åland Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

Salin selepas log masuk

atribut hasil tidak perlu ditetapkan kerana ini adalah satu -satunya data yang dikembalikan (tidak ada objek pembalut). Atribut Nama Hasil mesti ditetapkan kepada "Nama" kerana harta itu digunakan untuk mengisi elemen Datalist.

Bidang lain boleh dipenuhi secara automatik apabila pilihan dipilih. Input berikut menerima data harta "Alpha2Code" dan "Wilayah" kerana atribut data-autofill telah ditetapkan:

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

Salin selepas log masuk

Bagaimana DataList-Ajax berfungsi

Anda boleh melangkau bahagian ini jika anda lebih suka tidak membaca 230 baris kod dan menyimpan sihir hidup!

Kod pada mulanya mencipta baru dalam , yang dilekatkan pada kanak-kanak menggunakan atribut senarai. Pengendali acara input memantau dan memanggil fungsi runQuery () apabila bilangan minimum aksara telah dimasukkan dan pengguna masih belum menaip.

RunQuery () membina URL API dari data dalam bentuk dan membuat panggilan Ajax menggunakan API Fetch. JSON yang dikembalikan dihuraikan, maka fragmen DOM yang boleh diguna semula yang mengandungi elemen dibina dan dimasukkan ke dalam cache.

Fungsi DataListUpdate () dipanggil, yang mengemas kini dengan fragmen dom cache yang sesuai. Panggilan lanjut ke RunQuery () Elakkan panggilan Ajax jika pertanyaan telah di -cache atau pertanyaan sebelumnya boleh digunakan.

Pengendali peristiwa perubahan juga memantau , yang dicetuskan apabila fokus dipindahkan dari medan dan nilai telah diubah suai. Fungsi memeriksa bahawa nilai sepadan dengan pilihan yang diketahui dan, jika perlu, menggunakan API pengesahan kekangan untuk menunjukkan mesej ralat yang disediakan dalam atribut yang sah.

Dengan mengandaikan pilihan yang sah telah dipilih, fungsi pengendali perubahan memaparkan semua bidang dengan atribut data-autofill yang sepadan. Rujukan kepada medan auto-fill dikekalkan supaya mereka boleh diset semula jika pilihan tidak sah kemudian dimasukkan.

Perhatikan bahawa bayangan dom adalah tidak digunakan. Ini memastikan unsur-unsur auto-lengkap (dan ) boleh digayakan oleh CSS dan diakses oleh skrip lain jika perlu.

Dunkin '

HTML5 mempunyai batasan tetapi sesuai jika anda memerlukan medan auto-lengkap rangka kerja-agnostik yang mudah. Kekurangan sokongan CSS adalah memalukan, tetapi vendor penyemak imbas akhirnya dapat menangani pengawasan itu.

mana -mana kod dan contoh yang ditunjukkan dalam tutorial ini boleh digunakan untuk projek anda sendiri.

Soalan Lazim Mengenai Kawalan Autocomplete Ringan dengan Datalist HTML5

Apakah elemen Datalist HTML5 dan bagaimana ia berfungsi? Ia menyediakan ciri "autocomplete" pada elemen bentuk. Elemen Datalist menggunakan atribut ID untuk mengaitkannya dengan elemen input tertentu. Elemen input menggunakan atribut senarai untuk mengenal pasti DataList. Di dalam Datalist, anda boleh menentukan elemen pilihan yang mewakili pilihan yang tersedia untuk medan input. Perlu mengaitkan DataList dengan medan input. Ini dilakukan dengan menambahkan atribut senarai ke medan input dan menetapkan nilainya kepada ID DATALIST. Penyemak imbas kemudiannya akan mencadangkan pilihan autocomplete berdasarkan input pengguna dan pilihan yang ditetapkan dalam DATALIST. Pelayar yang paling moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, ia tidak disokong dalam versi Internet Explorer 9 dan terdahulu. Anda boleh menyemak keserasian penyemak imbas semasa di laman web seperti yang saya gunakan. Kemunculan senarai dropdown dikawal oleh penyemak imbas dan tidak dapat disesuaikan dengan CSS dengan mudah. Walau bagaimanapun, anda boleh gaya medan input yang dikaitkan dengan DataList.

Bolehkah saya menggunakan pelbagai datalists untuk satu medan input? Atribut senarai medan input hanya boleh mengambil satu ID, yang sepadan dengan satu DataList. Sekiranya anda perlu menyediakan pelbagai set pilihan, anda mungkin perlu menggunakan JavaScript untuk mengubah pilihan secara dinamik berdasarkan input pengguna. , Datalist HTML5 boleh digunakan dengan pelbagai jenis input, termasuk teks, carian, URL, tel, e-mel, tarikh, bulan, minggu, masa, setempat-tempatan, nombor, julat, dan warna. Walau bagaimanapun, ciri autocomplete mungkin tidak berfungsi seperti yang diharapkan dengan beberapa jenis input seperti julat atau warna. digunakan dengan elemen pilih. DataList direka untuk menyediakan cadangan autocomplete untuk medan input, manakala elemen pilih menyediakan senarai dropdown pilihan. Jika anda memerlukan senarai dropdown, anda harus menggunakan elemen pilih sebaliknya. Keluarkan, atau tukar pilihan. Walau bagaimanapun, perlu diingat bahawa DataList tidak menyokong peristiwa seperti Onchange atau OnClick pada pilihannya. Anda perlu menambah pendengar acara ke medan input yang berkaitan. medan. Ia boleh memberikan cadangan autocomplete berdasarkan input pengguna, yang dapat meningkatkan pengalaman pengguna. Walau bagaimanapun, anda perlu secara manual mengisi datalis dengan istilah carian yang mungkin. . DataList direka untuk memberikan cadangan autocomplete untuk medan input, bukan untuk Textarea. Jika anda memerlukan fungsi autocomplete untuk Textarea, anda mungkin perlu menggunakan perpustakaan JavaScript atau membina penyelesaian anda sendiri.

Atas ialah kandungan terperinci Kawalan autokomplet ringan dengan Datalist HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!