Cum de a crea un Datalist care este instantaneu de căutare

Listele de licitare sunt un mod bun pentru oferind opțiuni pentru un câmp de intrare, în special când lista opțiunilor disponibile este lungă. Un utilizator poate alege opțiunea dorită tastând în câmp, sau uita-te prin opțiuni care poate fi un meci pentru ceea ce cauta. Fiți capabili să căutați printre opțiuni, cu toate acestea, este soluția ideală.

Acest comportament poate fi atins cu Elementul HTML care afișează sugestiile de introducere pentru controale diferite, cum ar fi etichetă. in orice caz afișează doar opțiunile disponibile când utilizatorul are deja a scris ceva în câmpul de introducere.

Putem crea un câmp de intrare mai ușor de utilizat dacă permitem utilizatorilor să facă acest lucru accesați lista completă a opțiunilor în orice moment în timpul procesului de luare a datelor.

În acest post, vom vedea cum să creați o drop-down listă care poate fi căutată în orice moment folosind etichetă este la fel ca id din etichetă - așa le legăm unul de celălalt.

2. Faceți Datalistul vizibil

În mod implicit, funcția Elementul HTML este ascuns. Putem vedea doar atunci când noi începeți să introduceți o intrare în câmpul pe care este atașat datalistul.

Cu toate acestea, există o modalitate de a "forța" conținutul datalistului (adică toate opțiunile acestuia) să apară pe pagina web. Trebuie doar să-i dăm o potrivire afişa Valoarea proprietății în afară de nici unul, de exemplu display: block;.

 datalist display: bloc;

Opțiunile afișate nu sunt încă selectabile în acest moment, numai browser-ul face opțiunile găsește în interiorul datalistului.

Așa cum am menționat mai sus, datorită comportamentului încorporat al element, o parte din opțiuni apar deja și sunt selectabile, dar numai atunci când utilizatorul începe să introducă un șir de caractere pe care îl poate utiliza browserul găsiți o opțiune de potrivire.

Trebuie, de asemenea, să găsim un mecanism de realizat toate opțiuni (pe ecranul de mai sus afișat sub dropalistul de date) selectabil la orice alt punct al procesului de luare a datelor - când utilizatorii doresc să verifice opțiunile înainte de a scrie ceva sau când au luat deja ceva în câmpul de introducere.

3. Aduceți în Elementul HTML.

Vom alege a doua metodă, deoarece este mai simplă și este permisă folosirea acesteia ca mecanism de rezervă în browserele care nu acceptă element. Atunci când un browser nu poate afișa și afișa datele, acesta transformă Etichetă HTML, codul arată mai jos:

Datalist în combinație cu Adăugarea multiplu atribut la , astfel încât atunci când utilizatorul selectează o opțiune din lista derulantă, valoarea sa va fi afișată în interiorul de asemenea. / * când utilizatorul selectează o opțiune din DDL, scrie-o în câmpul text * / select.addEventListener ('change', fill_input); funcția fill_input () input.value = opțiuni [this.selectedIndex] .value; hide_select (); Inconvenientele Principalul dezavantaj al acestei tehnici este lipsa unui mod direct de a modela element cu CSS (aspectul și