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ගුණාංගය,
එය ආකෘති ක්ෂේත්ර සඳහා ස්වයංක්රීය පුරවීම සකසයි
