თეგი datalist

თეგი datalist ქმნის ავტოშევსებას შეყვანის ველებისთვის input HTML ფორმაში.

ავტოშევსების არსი: როდესაც მომხმარებელი ცდილობს რაიმე აკრიფოს შეყვანის ველში, ქვემოთ გამოჩნდება всплывающей მინიშნება, რომელიც იქნება ხელმისაწვდომი არჩევანის ვარიანტების სია. მომხმარებელს შეეძლება აირჩიოს ერთ-ერთი შემოთავაზებული ვარიანტი, ბოლომდე არ აკრიფოთ ის.

რომ მივაბათ 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' - გამოჩენილ სიაში თქვენ დაინახავთ არა მხოლოდ 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,
რომელიც აკონკრეტებს ავტოშევსებას ფორმის ველებისთვის