ජාවාස්ක්‍රිප්ට් හි ස්වයං-පූරණය

දැන් අපි ස්වයං-පූරණය ක්‍රියාත්මක කරමු. මෙම පදය අර්ථ දැක්වෙන්නේ ආදාන පෙට්ටියකට පෙළ ඇතුළු කිරීමේදී පතනය වන ඉඟියක් ලෙසය. අපි උදාහරණයක් බලමු. පහතින් මම රටක නම ඇතුළු කළ හැකි ආදාන පෙට්ටියක් සාදා ඇත. ඒ සමඟම, යම් අකුරු ඇතුළු කළහොත්, ආදාන පෙට්ටිය යටින් ඇතුළු කළ නූලෙන් ආරම්භ වන රටවල ලැයිස්තුවක් පෙනී යනු ඇත.

අවශ්‍ය නම්, සම්පූර්ණයෙන්ම රටේ නම ඇතුළු නොකර, මූසිකය එක් කිසිදු රටක් මත ක්ලික් කර එය ආදාන පෙට්ටියේ පෙනෙන පරිදි කළ හැක. මේ සඳහා, පොදුවේ කියතොත්, ස්වයං-පූරණය අවශ්‍ය වේ. සරල භාවය සඳහා, මම උදාහරණයේ රට්‍රු තුනක් පමණක් සාදා ඇත: Belarus, Belgium සහ Bulgaria. පහත දක්වා ඇති ආදාන පෙට්ටියට පළමුව 'B' ඉංග්‍රීසි අකුර, පසුව 'e' ඇතුළු කර සිදුවන දේ බලන්න:

සාකච්ඡාව

ගැටලුව විසඳන්නේ කෙසේදැයි සාකච්ඡා කරමු. රටවල නම් සහිත අරාවක් සෑදිය යුතුය. මගේ එය මේ වගේ:

let arr = ['Belarus', 'Belgium', 'Bulgaria'];

ආදාන පෙට්ටියට පෙළ ඇතුළු කිරීමේදී, ඇතුළු කරන සෑම අක්ෂරයකටම පසුව රටවල් සමඟ අරාව හරහා ගොස් ඇතුළු කළ නූලෙන් ආරම්භ වන රටවල් ලබා ගත යුතුය. මෙය ක්‍රම filter සහ startsWith භාවිතයෙන් පහසුවෙන් කළ හැකිය.

filter භාවිතයෙන් ඇතුළු කළ නූලෙන් ආරම්භ වන රටවල අරාවක් ලබා ගත හැකිය. ඉන්පසු අරාව චක්‍රයක් ඔස්සේ ගොස් ul ලැයිස්තුව රටවල් සහිත li අංග වලින් පුරවන්න. සෑම අක්ෂර ආදානයකටම මෙය කළ යුතුය, කලින් සෑදූ li අංග ul වලින් ඉවත් කරමින්.

ඔබගේ පහසුව සඳහා සූදානම් HTML වින්‍යාසය සපයමි:

<div id="parent">
	<input id="elem">
	<ul id="list"></ul>
</div>
text text text text text

#parent {
	position: relative;
}
#elem {
	padding: 5px;
	font-size: 18px;
}

#parent ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: white;
}
#parent li {
	border: 1px solid gray;
	font-size: 18px;
	padding: 5px;
}
#parent li:hover {
	border: 1px solid black;
	cursor: pointer;
}

දක්වා ඇති HTML සහ CSS කේත ඔබ වෙත පිටපත් කර ගන්න. විස්තර කරන ලද ඇල්ගොරිතම අනුව ස්වයං-පූරණය ක්‍රියාත්මක කරන්න.