Tagu datalist

Tagu datalist krijon plotësim të automatizuar për fushat e hyrjes input në formular HTML.

Thelbi i plotësimit të automatizuar: kur përdoruesi përpiqet të shkruajë diçka në fushën e hyrjes, poshtë do të shfaqet një këshillë pop-up, e cila do të përfaqësojë një listë të opsioneve të disponueshme për zgjedhje. Përdoruesi do të mund të zgjedhë një nga opsionet e propozuara, pa e futur atë plotësisht.

Për të lidhur plotësim të automatizuar me tagun input, atij i duhet caktuar atributi list, në të cilin duhet të specifikohet atributi id i tagut datalist që po lidhet.

Opsionet e zgjedhjes ruhen në taget option, të cilat nga ana tjetër ruhen në tagun datalist.

Shembull

Le të fusim një vend në fushën e hyrjes. Le të fusim fillimisht shkronjën 'b' - dhe do të shohim një këshillë pop-up nga tre vende. Pastaj le të fusim edhe shkronjën 'e' - numri i vendeve të propozuara do të reduktohet në dy:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Shembull

Tani le t'i shtojmë tagut option atributin value. Kur zgjidhet një vend i caktuar, në input-in e lidhur do të futet jo emri i vendit, por përmbajtja e atributit value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

Shembull . Ndikimi i atributit autocomplete

Në listën rënëse të këshillave ndikon atributi autocomplete. Nëse është i aktivizuar (dhe kështu do të jetë si parazgjedhje), atëherë me vlerat që keni vendosur në tagun datalist, do të përzihen ato vlera që përdoruesi ka futur në këtë fushë më parë.

Shkruani në fushë 'Brazil' dhe shtypni butonin e dërgimit (pa dërgim shfletuesi nuk do ta kujtojë këtë vend). Pastaj kthehuni në këtë shembull dhe fusni shkronjën 'b' - në listën që shfaqet do të shihni jo vetëm 3 vende nga datalist, por edhe vendin e futur më parë (përveç kësaj, nëse bëni të njëjtën gjë me fjalën 'Belarus' - në listën rënëse kjo vlerë do të jetë dy herë).

Nëse kjo ju shqetëson - çaktivizoni atributin autocomplete, duke i shtuar vlerën off.

Kryeni manipulimet e përshkruara më sipër me shembullin:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

Shihni gjithashtu

atributi autocomplete,
i cili cakton plotësim të automatizuar për fushat e formularit