Share
HTML5 a introdus o serie de elemente noi, printre care unele controale de formă interesante. Un astfel de control util, dar puțin cunoscut este elementul datalist. Să vedem ce poate face pentru noi.
Imaginați-vă că avem un formular și dorim ca un utilizator să introducă un șir de text, cum ar fi numele acestuia, de exemplu. Avem element, ceea ce va permite utilizatorului să scrie tot ce-și doreste. Imaginați-vă apoi că vrem ca utilizatorul să intre în țara sa de reședință; probabil că vom folosi a element. Acest lucru ar limita rezultatele la opțiunile disponibile (uneori un lucru bun) și ar prezenta, de asemenea, utilizatorul cu un potențial imens listă pentru a alege de la.
Dar daca dorim ca utilizatorul sa fie liber sa intre in ceea ce doreste, in timp ce, in acelasi timp, sa aiba cateva sugestii? Aici e locul datalist intră.
datalist conține opțiune elemente asemănătoare Selectați element, totuși datalist ea însăși nu este un control independent. În schimb, acesta este adăugat sau atașat unui folosind elementul listă atribut. Luați în considerare următorul marcaj:
Avem regulat de control cu un id și noul listă atribut. Acest lucru îi spune browserului să încarce lista de valori sau sugestii din datalist element cu un id corespunzător.
Apoi vine realitatea datalist element cu cele de mai sus id și o colecție de opțiune elemente. Acesta este modul în care valorile sunt atașate la intrare Control.
Când rulați acest lucru în browser, vom vedea o casetă de text normală, atunci când începem să tastăm (sau apăsați tasta săgeată în jos, care funcționează în Firefox și Chrome, dar nu în Opera) apare lista completă sau filtrată. Pe măsură ce tastăm, vor fi afișate doar opțiunile relevante, la fel ca și în cazul în care caseta Căutare Google afișează sugestii. Fiți conștient de faptul că există variații de comportament ușoare de la browser la browser.
Potrivit site-ului oficial al W3C, datalist pot fi utilizate cu:
Accentsconagua
Putem lua opțiunile cu un pas mai departe prin adăugarea a eticheta atribut, ca în unele dintre elementele de mai jos:
Exact modul în care aceste etichete sunt afișate și manipulate depinde de browser - aruncați o privire la quirks secțiune mai jos pentru a vedea cum.
Suportul browserului pentru datalist a rămas îngust până de curând. Acum, IE 10+, Firefox 4+, Chrome și Opera îl suportă (încă nu există un Safari). Este, de asemenea, susținută de Opera Mobile și Firefox pentru Android. Aruncați o privire la această captură de ecran care afișează starea curentă listată de caniuse.com:
Browserele mai vechi vor ignora automat elementul datalist.
Suportul global menționat este de 48,36%. Probabil că nu este așa de bun, dar vestea pozitivă este că browserele mai vechi vor ignora automat elementul datalist, oferindu-ne o experiență grațios degradantă. Aceasta este de fapt adevărată pentru toate noile elemente de formă HTML5. Dacă este necesar suport pentru browsere mai vechi, autocompleta jQuery poate fi utilizată ca rezervă.
Deoarece asistența extinsă pentru browser este recentă, există interpretări previzibile de către furnizori. Firefox și Chrome utilizează tema OS pentru a modela opțiunile de listă, în timp ce Opera va moșteni anumite stiluri (culoare, font-familie) din intrare camp. În afară de asta, uitați stilul elementului datalist cu CSS.
De asemenea, comportamentul variază în funcție de modul în care sunt filtrate valorile. Fiecare browser gestionează lista în mod diferit atunci când eticheta și valoare atributele opțiune sunt utilizate.
De exemplu, Opera va filtra pe baza atât a valorii cât și a etichetei. "de A" și de "Brac" vor reveni la "Bracket" în cazul nostru.
Cu toate acestea, Chrome va ignora eticheta. "de către A" nu va returna nici un rezultat, de exemplu, în timp ce "Brac" va.
Firefox afișează numai eticheta dacă este definită. "de A" se va întoarce "de Adobe", dar "Brackets" nu mai există deloc!
Există destule posibilități de îmbunătățire în ceea ce privește implementarea, dar, în general, acesta este un plus de bun venit în lumea web. Sper că acest lucru ți-a adus apetitul!
