Тег 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 атрибуты,
ол пішін өрістеріне автотолтыруды орнатады