စုံစမ်း/ရှာဖွေ စာရင်း
JavaScript ကို စုံစမ်း စာရင်း ဖွဲ့စည်းခြင်း လေ့လာခြင်း
စာရင်း စုံစမ်းခြင်း
JavaScript ကို စာရင်း အရွက် အမှုန် စုံစမ်း လုပ်ခြင်း
ရှာဖွေ စာရင်း ဖွဲ့စည်းခြင်း
ဆုံးဖြတ်ချက် တတိယ - စကားလုံး အချက်အလက် ထပ်ထည့်ခြင်း:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul>
မှတ်ချက်:ဒီ ပြပွဲမှာ ကျွန်တော်တို့ သည် href="#" ကို အသုံးပြုခဲ့သော်လည်း အခြား အသုံးပြုခြင်းမှာ အချက်အလက် ရှိသော စာမျက်နှာ အရှိန် URL အိုင်အေ ဖြစ်သည်။
ဆုံးဖြတ်ချက် ဒုတိယ - စကားလုံး အချက်အလက် ထပ်ထည့်ခြင်း:
အရည်ချင်း အသုံးပြုရာ စာရင်း နှင့် အော်တိုက် အပြုအမူ ဖြင့် ပြင်ဆင်ခြင်း:
#myInput { background-image: url('/css/searchicon.png'); /* အော်တိုက် အော်ရီကြီး အရွက် ရှာဖွေ ပုံ ပေါ်ထား */ background-position: 10px 12px; /* ပုံ အခြေအနေ 10 ပုံ 12 ပုံ */ background-repeat: no-repeat; /* ပုံ ပြန်ဖြစ်မှု မပြန်တက်ချီ */ width: 100%; /* အရွယ် 100% */ font-size: 16px; /* စာအုပ် အရွယ် 16 ပုံ ကြီးတက်ချီ */ padding: 12px 20px 12px 40px; /* အိမ်ခြေ အကြာ 12 ပုံ 20 ပုံ 12 ပုံ 40 ပုံ အချိန်ကျန်းချီ */ border: 1px solid #ddd; /* ခြည်အထောင် အကြား အကြာ 1 ပုံ အော်တိုက် */ margin-bottom: 12px; /* တန်ဖိုးပြင် အော်တိုက် အော်ရီကြီး အရွက် အချိန်ကျန်းချီ */ } #myUL { /* မူကျမ်း စာရင်း အပြုအမူ ဖြုတ်ချ */ list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; /* ချွန်တင်ချိန် အခြေအနေ အား အဆိုင်း */ margin-top: -1px; /* ချွန်တင်ချိန် အခြေအနေ အား အကွင်းအပိုင်း */ background-color: #f6f6f6; /* ချွန်တင်ချိန် အခြေအနေ အား အမှုန်အရောင် */ padding: 12px; /* ချွန်တင်ချိန် အခြေအနေ အား အကွင်းအပိုင်း */ text-decoration: none; /* ချွန်တင်ချိန် အခြေအနေ အား အခြေအနေ */ font-size: 18px; /* ချွန်တင်ချိန် အခြေအနေ အား စာအုပ်အရေး */ color: black; /* ချွန်တင်ချိန် အခြေအနေ အား အရောင် */ display: block; /* ချွန်တင်ချိန် အခြေအနေ အား အဆင်းတူသော စာအုပ်အချက်အလက် အား ပေါင်းစပ်ပါ */ } #myUL li a:hover:not(.header) { background-color: #eee; /* ခေါင်းစဉ်မပါဘဲ ချွန်တင်ချိန် အခြေအနေ */ }
တတိယပိုင်း - JavaScript ထပ်ပေါင်းပါ
<script> function myFunction() { // လမ်းကြောင်း ပြောဆိုပါ var input, filter, ul, li, a, i, txtValue; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'); // အဆင်းတူသော စာအုပ်အချက်အလက် အား လုပ်ဆောင်ရန် အဆင်းတူသော စာအုပ်အချက်အလက် ကို ဖြတ်သိမ်းပါ for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script>
အဆိုပါအချက်အလက်အချင်းအရေးပါသော ရှာဖွေမှု လုပ်ဆောင်ရန် ဖြစ်သည့်အခါ toUpperCase() ကို ဖယ်ရှားပါ။
相关页面
教程:如何过滤/搜索表格