Bootstrap 4 Filters (အဆင့်မြင့်)
Bootstrap 4 Filters
Bootstrap တွင် စစ်ထုတ်ခြင်းကို ခွင့်ပြုသည့် အစိတ်အပိုင်း မရှိပါ။ သို့သော်၊ ကျွန်ုပ်တို့သည် ဒြပ်စင်များအတွက် စစ်ထုတ်/ရှာဖွေရန် jQuery ကို အသုံးပြုနိုင်ပါသည် ။
ဇယားများကို စစ်ထုတ်ပါ။
ဇယားတစ်ခုရှိ အရာများအတွက် အသေးအမွှားမပါသော ရှာဖွေမှုကို လုပ်ဆောင်ပါ-
ဥပမာ
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var
value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
ဥပမာအားဖြင့် ရှင်းပြထားသည်- ကျွန်ုပ်တို့သည် ထည့်သွင်းမှုအကွက်၏တန်ဖိုးနှင့် ကိုက်ညီသည့် စာသားတန်ဖိုးများ ရှိမရှိ စစ်ဆေးရန် ဇယားအတန်းတစ်ခုစီကို လှည့်ပတ်ရန် jQuery ကို အသုံးပြုပါသည်။ နည်းလမ်း သည် ရှာဖွေမှုနှင့် မကိုက်ညီသော togglerow ( ) ကို ဝှက်ထားသည် ။ ကျွန်ုပ်တို့သည် ရှာဖွေမှုကိစ်စကို အာရုံမစိုက်နိုင်စေရန် ("ဂျွန်"၊ "ဂျွန်" နှင့် "JOHN" တို့ကိုပင် ရှာဖွေခွင့်ပြုသည်) စာသားကို စာလုံးအသေးသို့ ပြောင်းရန် နည်းလမ်းကို ကျွန်ုပ်တို့အသုံးပြုပါသည် display:none။toLowerCase()
စာရင်းများကို စစ်ထုတ်ပါ။
စာရင်းတစ်ခုရှိအရာများအတွက် အသေးအမွှားမပါသော ရှာဖွေမှုကို လုပ်ဆောင်ပါ-
ဥပမာ
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
မည်သည့်အရာကိုမဆို စစ်ထုတ်ပါ။
div ဒြပ်စင်အတွင်းရှိ စာသားအတွက် စာလုံးအကြီးအသေးမပါသော ရှာဖွေမှုကို လုပ်ဆောင်ပါ-
ဥပမာ
I am a paragraph.
Another paragraph.