Kichwa cha datalist

Kichwa datalist hunda kujaza kiotomatiki kwa sehemu za kuingiza input katika fomu ya HTML.

Kiini cha kujaza kiotomatiki: wakati mtumiaji atakapokuwa anijaribu kuandika kitu kwenye uga wa kuingiza, chini hutaonekana kidokezo kilichojeua, ambacho kitakuwa kinawasilisha orodha ya chaguzi zilizopatikana za kuchagua. Mtumiaji ataweza kuchagua moja kati ya chaguzi zilizopendekezwa, bila kuingiza kikamilifu.

Ili kufungulia kichwa input kujaza kiotomatiki, inabidi upewe sifa list, ambayo inapaswa kubainisha sifa id ya kichwa datalist kinachofunguliwa.

Chaguzi za kuchagua huhifadhiwa katika vitags option, ambazo kwa upande wake huhifadhiwa katika kichwa datalist.

Mfano

Wacha tuingize nchi kwenye uga wa kuingiza. Wacha tuingize kwanza herufi 'b' - na tuone kidokezo kilichojeua kinachojumuisha nchi tatu. Kisha tuingize herufi nyingine 'e' - idadi ya nchi zilizopendekezwa itapungua hadi mbili:

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

Mfano

Wacha sasa kwenye kichwa option tuongeze sifa value. Wakati wa kuchagua nchi fulani kwenye input iliyofunguliwa haitakuwa jina la nchi, lakini yaliyomo kwenye sifa value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - nchi ya maziwa na viazi</option>
	<option value="Belgium">Belgium - nchi ambayo Wabelgiani wanaishi</option>
	<option value="Bulgaria">Bulgaria - nchi kwa likizo</option>
</datalist>

Mfano . Athari ya sifa ya autocomplete

Kwenye orodha inayojitokeza ya vidokezo ina athari sifa autocomplete. Ikiwa imewashwa (na hivyo ndivyo itakavyokuwa kwa chaguomsingi), basi kwa maadili ambayo umeainisha kwenye kichwa datalist, yatachanganyika na maadili yale, ambayo mtumiaji aliingiza kwenye uga huu awali.

Ingiza kwenye uga 'Brazil' na ubonye kitufe cha kutumia (bila kutumia kivinjari hakitakumbuki nchi hii). Kisha rudi kwenye mfano huu na uingize herufi 'b' - kwenye orodha iliyojitokeza utaona sio tu 3 nchi kutoka datalist, lakini pia nchi iliyoingizwa awali (mbali na hilo, ikiwa utafanya vivyo hivyo na neno 'Belarus' - kwenye orodha inayojitokeza thamani hii itakuwa mara mbili).

Ikiwa hii inakusumbua - zima sifa autocomplete, ukiiongezea thamani off.

Fanya mienendo iliyoelezwa hapo juu na mfano:

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

Angalia pia

sifa autocomplete,
ambayo huweka kujaza kiotomatiki kwa sehemu za fomu