JavaScript ဖြင့် အလိုအလျောက် ဖြည့်စွက်ခြင်း

ယခုအချိန်တွင် ကျွန်ုပ်တို့သည် အလိုအလျောက် ဖြည့်စွက်ခြင်းကို အကောင်အထည်ဖော်ပါမည်။ ဤဝေါဟာရသည် input တွင် စာသားရိုက်ထည့်သည့်အခါ ကျလာသည့် ညွှန်ပြချက်ကို နားလည်ပါသည်။ ဥပမာတစ်ခုဖြင့် ကြည့်ရအောင်။ အောက်တွင် ကျွန်ုပ်သည် နိုင်ငံအမည်ကို ရိုက်ထည့်နိုင်သည့် input တစ်ခုပြုလုပ်ထားပါသည်။ ထိုအခါ စာလုံးအချို့ ရိုက်ထည့်ပါက input အောက်တွင် ရိုက်ထည့်ထားသည့် string ဖြင့် စသည့် နိုင်ငံများ၏ စာရင်းပေါ်လာပါမည်။

လိုချင်ပါက ၊ တစ်နိုင်ငံလုံး၏ အမည်ကို မရိုက်ထည့်ရန် ၊ mouse ဖြင့် မည်သည့်နိုင်ငံကိုမဆို click နှိပ်ပြီး ၎င်းကို input တွင်ပေါ်စေနိုင်ပါသည်။ ယေဘုယျအားဖြင့် ၊ အလိုအလျောက်ဖြည့်စွက်ခြင်းသည် ဤအတွက် လိုအပ်ပါသည်။ ရိုးရှင်းစေရန် ဥပမာတွင် ကျွန်ုပ်သည် နိုင်ငံသုံးခုသာ ပြုလုပ်ထားပါသည်- Belarus, Belgium နှင့် Bulgaria ။ အောက်ပါ input ထဲသို့ ပထမဦးစွာ 'B' အင်္ဂလိပ်စာလုံးကို ၊ ထို့နောက် 'e' ကို ရိုက်ထည့်ပြီး ဖြစ်လာမည့်အရာကို ကြည့်ပါ-

ဆွေးနွေးခြင်း

ပြဿနာကို မည်သို့ဖြေရှင်းရမည်ကို ဆွေးနွေးကြပါစို့။ နိုင်ငံအမည်များဖြင့် array တစ်ခုပြုလုပ်ရန် လိုအပ်ပါသည်။ ကျွန်ုပ်၏ array သည် ဤကဲ့သို့ဖြစ်သည်-

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

input ထဲသို့ စာသားရိုက်ထည့်သည့်အခါ တစ်လုံးချင်းစီ ရိုက်ထည့်သည့်အခါတိုင်း နိုင်ငံများပါဝင်သည့် array ကို ဖြတ်ပြီး ရိုက်ထည့်ထားသည့် string ဖြင့်စသည့် နိုင်ငံများကို ရယူရန် လိုအပ်ပါသည်။ ဤသည်ကို filter နှင့် startsWith နည်းလမ်းများဖြင့် လုပ်ဆောင်ရန် လွယ်ကူပါသည်။

filter ကို အသုံးပြု၍ ရိုက်ထည့်ထားသည့် string ဖြင့်စသည့် နိုင်ငံများ၏ array ကို ရရှိနိုင်ပါသည်။ ထို့နောက် loop ဖြင့် ဤ array ကို ဖြတ်ပြီး နိုင်ငံများဖြင့် ဖြည့်ထားသည့် li များပါဝင်သည့် ul စာရင်းကို ပြုလုပ်ရန် လိုအပ်ပါသည်။ ထို့ပြင် ယခင်က ဖန်တီးထားသည့် li များကို ul မှ ဖျက်ပြီး စာလုံးတစ်လုံးစီ ရိုက်ထည့်တိုင်း ဤသို့လုပ်ဆောင်ရန် လိုအပ်ပါသည်။

သင်၏ အဆင်ပြေမှုအတွက် အဆင်သင့်ဖြစ်နေသော ဝဘ်စာမျက်နှာအဖြင့် ပေးပါမည်-

<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 ကုဒ်များကို သင့်ဘက်သို့ ကူးယူပါ။ ဖော်ပြပါ အယ်ဂိုရီသမ်အတိုင်း အလိုအလျောက် ဖြည့်စွက်ခြင်းကို အကောင်အထည်ဖော်ပါ။