Datalist теги

datalist теги HTML формасындагы input киргизүү талаалары үчүн автотолтуруу түзөт.

Автотолтуруунун мәниси: колдонуучу киргизүү талаасына бир нерсени терип жатканда, астында колдонуучунун тандоосу үчүн бар болгон варианттардын тизмеси болгон чачыраган подсказка пайда болот. Колдонуучу алардын бирин толугу менен тербестен тандай алат.

input тегине автотолтурууну байланыштыруу үчүн, ага байланыштырылуучу datalist тегинин id атрибуттарын көрсөтүүчү list атрибутун берүү керек.

Тандоо варианттары өз кезегинде datalist тегинде сакталган option теглеринде сакталат.

Мисал

Киргизүү талаасына өлкөнү киргизели. Алгач '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 - көлдөр жана картошка өлкөсү</option>
	<option value="Belgium">Belgium - бельгиялыктар жашаган өлкө</option>
	<option value="Bulgaria">Bulgaria - эс алуу үчүн өлкө</option>
</datalist>

Мисал . Autocomplete атрибутунун таасири

Чачыроочу подсказкалар тизмесине autocomplete атрибуту таасирин тийгизет. Эгер ал иштетилсе (жана демейкиде ушундай болот), анда сиз datalist тегинде белгилеген баалуулуктарга, колдонуучу бул талаага мурун киргизген баалуулуктар аралашып кошот.

Талаага 'Brazil' деп киргизип, жөнөтүү баскычын басыңыз (жөнөтпөсө браузер бул өлкөнү эстей албайт). Андан кийин бул мисалга кайтып келип, 'b' тамгасын киргизсеңиз - пайда болгон тизмеде сиз datalistтен 3 өлкөнү гана эмес, мурун киргизилген өлкөнү да көрөсүз (кроме того, сиз 'Belarus' сөзү менен да ошол эле ишти кылсаңыз - чачыроочу тизмеде бул маани эки жолу болот).

Эгер бул сизге тоскоолдук кылса - off маанисин кошуп, autocomplete атрибутун өчүрүңүз.

Жогоруда сүрөттөлгөн манипуляцияларды мына бул мисал менен жүргүзүңүз:

<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 атрибуту,