Kawalan autokomplet ringan dengan Datalist HTML5

Dalam tutorial ini, kami akan mengambil menyelam ke dalam elemen HTML5 > Menggunakan atribut nilai menghasilkan hasil yang sama:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> 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></span></span>

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> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Opsyen 2:

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

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

Chrome menunjukkan senarai dengan kedua -dua nilai dan label. Hanya nilai yang kekal apabila pilihan dipilih.
Firefox menunjukkan senarai dengan label sahaja. Ia beralih ke nilai apabila pilihan dipilih.
Edge menunjukkan nilai sahaja.

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:

3

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

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

>

Lihat pena
html5

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) dan teks input aktif:

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

Tentukan yang paling sah, atau
Gunakan fungsi JavaScript kecil untuk menetapkan semula apabila yang lain diubah

Menggunakan pada kawalan bukan teks

pelayar berasaskan krom juga boleh memohon nilai kepada:

1. input dengan jenis "tarikh". Pengguna boleh memilih dari pelbagai pilihan yang ditakrifkan sebagai nilai YYYY-MM-DD tetapi dibentangkan dalam format locale mereka.

2. input dengan jenis "warna". Pengguna boleh memilih dari pilihan pilihan warna yang ditakrifkan sebagai nilai hex enam digit (nilai tiga digit tidak berfungsi).

3. 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:

mengatasi tingkah laku penyemak imbas lalai
dengan berkesan merawat

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