Datalist tegini

datalist tegini, HTML formasyndaky girme meýdançalary input üçin awtomatiki dolduryş döredýär.

Awtomatiki dolduryşyň möhümi: ulanyjy girme meýdançasyna bir zat ýazmaga synanyşanynda, aşakda elýeterli wariantlaryň sanawy hökmünde peýda bolýan ýardamçy çykyş peýda bolýar. Ulanyjy, teklip edilen wariantlardan birini, ony ahyryna çenli ýazmazdan saýlap biler.

input tegine awtomatiki dolduryş baglamak üçin, ona list atributyny bermek gerek, ol ýerde baglanylýan datalist teginiň id atributy görkezilmeli.

Saýlaw wariantlary option teginlerinde saklanýar, öz gezeginde olar datalist teginde saklanýar.

Mysal

Girme meýdançasyna bir ýurt ýazalyň. Ilki bilen 'b' harpyny ýazalyň - we üç ýurtdan ybarat çykyş ýardamçyny göreris. Soňra ýene bir 'e' harpyny ýazalyň - teklip edilýän ýurtlaryň sany iki sany azalýar:

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

Mysal

Indi option tegine value atributyny goşalyň. Belli bir ýurt saýlanylanda, birikdirilen inputa ýurdyň ady däl, eýsem value atributynyň mazmuny düşer:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - kölleri we kartoşkasy bolan ýurt</option>
	<option value="Belgium">Belgium - Belgiýalylaryň ýaşaýan ýurdy</option>
	<option value="Bulgaria">Bulgaria - dynç alyş ýurdy</option>
</datalist>

Mysal . Autocomplete atributynyň täsiri

Ýardamçy açylýan sanawa autocomplete atributy täsir edýär. Eger ol açyk bolsa (adaty ýagdaýda şeýle), onda datalist teginde görkezen bahalaryňyza, ulanyjynyň bu meýdança öň girizen bahalary goşulýar.

Meýdançada 'Brazil' ýazyň we ibermek düwmesine basyň (ibermezden, brauzer bu ýurdy ýatda saklamaz). Soňra bu mysala gaýdyp geliň we 'b' harpyny ýazyň - peýda bolýan sanawda diňe datalist-däki 3 ýurt däl, eýsem öň ýazylanda ýatda galan ýurt hem görersiňiz (mundan başga-da, eger 'Belarus' sözi bilen hem şonuň ýaly etseňiz - açylýan sanawda bu baha iki gezek bolup görner).

Eger bu size päsgel berýän bolsa - autocomplete atributyny ýapyň, ona off bahasyny goşup.

Beýany edilen hereketleri mysal bilen ýerine ýetiriň:

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

Şeýle hem göz aýlaň

autocomplete atributy,
formanyň meýdançalaryna awtomatiki dolduryş berýär