Теги datalist

Теги datalist пур кардани худкорӣ барои майдонҳои воридкунӣ input дар HTML шакл эҷод мекунад.

Маънои пур кардани худкорӣ: вақте корбар кӯшиш мекунад чизеро дар майдони воридкунӣ нависад, дар поён гуфтугӯи пайдошаванда пайдо мешавад, ки рӯйхати дастраси ихтиёрҳоро пешниҳод мекунад. Корбар метавонад якеро аз вариантҳои пешниҳодшуда интихоб кунад, бидуни ворид кардани он то поён.

Барои ба теги input пайваст кардани пур кардани худкорӣ, ба он зарур аст, ки атрибут list таъин карда шавад, ки дар он бояд атрибути id теги пайвастшавандаи datalist нишон дода шавад.

Вариантҳои интихоб дар тегҳои option нигоҳ дошта мешаванд, ки ба навбат худ дар теги datalist нигоҳ дошта мешаванд.

Намуна

Биёед дар майдони воридкунӣ кишварро ворид кунем. Аввал ҳарфи 'b' -ро ворид кунем ва гуфтугӯи пайдошавандаро аз се кишвар дида мебароем. Сипас ҳарфи 'e' -ро ворид кунем - шумораи пешниҳодшудаи кишварҳо то ду кам мешавад:

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

Намуна

Акнун ба теги option атрибути value илова кунем. Ҳангоми интихоби кишвари муайян дар input-и пайвастшуда номи кишвар набуда, балки мундариҷаи атрибути 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'-ро ворид кунед - дар рӯйхати пайдошаванда шумо на танҳо 3 кишвар аз datalist, балки кишвари пештар воридкардашударо хоҳед дид (ғайр аз он, агар шумо ҳамин кориро бо калимаи '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,
ки пур кардани худкорӣ ба майдонҳои шакл медиҳад