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 - ကန်များနှင့် အာလူးများ၏ နိုင်ငံ</option>
	<option value="Belgium">Belgium - ဘယ်လ်ဂျီယမ်နိုင်ငံသားများ နေထိုင်ရာ နိုင်ငံ</option>
	<option value="Bulgaria">Bulgaria - အားလပ်ရက်အတွက် နိုင်ငံ</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 အတ္ထုပတ္တိ,
ဖောင်ကွက်များအား အလိုအလျောက်ဖြည့်ခြင်းကို သတ်မှတ်ပေးသည်