datalist թեգ

datalist datalist թեգը ստեղծում է ինքնալրացում HTML ֆորմայի input դաշտերի համար:

Ինքնալրացման էությունը. երբ օգտատերը կփորձի ինչ-որ բան մուտքագրել դաշտում, ներքևից կհայտնվի գործիքի հուհշում, որը կներկայացնի ընտրության հասանելի տարբերակների ցուցակ: Օգտատերը կկարողանա ընտրել առաջարկվող տարբերակներից մեկը՝ առանց այն մինչև վերջ մուտքագրելու:

input թեգին ինքնալրացում կապելու համար, նրան անհրաժեշտ է տրվի list ատրիբուտը, որում պետք է նշվի կապվող datalist թեգի id ատրիբուտը:

Ընտրության տարբերակները պահվում են option թեգերում, որոնք իրենց հերթին պահվում են datalist թեգում:

Օրինակ

Եկեք դաշտում մուտքագրենք երկիր: Սկզբում մուտքագրենք 'b' տառը - և կտեսնենք երեք երկրներից բաղկացած հուշում: Ապա մուտքագրենք նաև 'e' տառը - առաջարկվող երկրների քանակը կնվազի մինչև երկու:

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

Օրինակ

Եկեք այժմ option թեգին ավելացնենք value ատրիբուտը: Որոշակի երկիր ընտրելիս, կապված դաշտում կհայտնվի ոչ թե երկրի անունը, այլ 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>

Օրինակ . autocomplete ատրիբուտի ազդեցությունը

Իջնող ցուցակի հուշումների վրա ազդեցություն է ունենում autocomplete ատրիբուտը: Եթե այն միացված է (ինչը լռելյայն այդպես է), ապա այն արժեքներին, որոնք դուք տվել եք datalist թեգում, կխառնվեն այն արժեքները, որոնք օգտատերը նախկինում մուտքագրել է այս դաշտում:

Մուտքագրեք դաշտում 'Brazil' և սեղմեք ուղարկման կոճակը (առանց ուղարկման բրաուզերը չի հիշի այս երկիրը): Ապա վերադարձեք այս օրինակին և մուտքագրեք 'b' տառը - հայտնված ցուցակում դուք կտեսնեք ոչ միայն datalist-ի 3 երկիրը, այլև նախկինում մուտքագրված երկիրը (բացի այդ, եթե նույնը անեք 'Belarus' բառի հետ - իջնող ցուցակում այս արժեքը կլինի երկու անգամ):

Եթե սա ձեզ խանգարում է - անջատեք autocomplete ատրիբուտը՝ տալով ему off արժեքը:

Կատարեք վերը նկարագրված գործողությունները այս օրինակով:

<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>

Տես նաև

autocomplete ատրիբուտը,
որը ֆորմայի դաշտերին տալիս է ինքնալրացում