လုပ်နည်း - Search Menu
JavaScript ဖြင့် လင့်ခ်များကို စစ်ထုတ်ရန် ရှာဖွေမှုမီနူးကို ဖန်တီးနည်းကို လေ့လာပါ။
ရှာဖွေ/စစ်ထုတ်ခြင်း မီနူး
လမ်းညွှန်မီနူးရှိ လင့်ခ်များကို ရှာဖွေနည်း-
စာမျက်နှာ အကြောင်းအရာ
ရှာဖွေမှုဘားအတွင်းရှိ သီးခြားအမျိုးအစား/လင့်ခ်တစ်ခုအတွက် ရှာဖွေမှုရွေးချယ်စရာများကို "စစ်ထုတ်ရန်" စတင်ပါ။
စာသားတစ်ချို့..တစ်ချို့စာသား..တစ်ချို့စာသား..တစ်ချို့စာသား..စာသားတစ်ချို့..စာသားတစ်ချို့..စာသားတစ်ချို့..စာသားတစ်ချို့..
အခြားစာသားအချို့..စာသားအချို့..စာသားအချို့..စာသားအချို့..စာသားအချို့..စာသားအချို့..စာသားအချို့..စာသားအချို့.
စာသားတစ်ချို့..
ရှာဖွေမှုမီနူးတစ်ခု ဖန်တီးပါ။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."
title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
မှတ်ချက်- ကျွန်ုပ်တို့တွင် ၎င်းကို လင့်ခ်ချိတ်ရန် စာမျက်နှာမရှိသောကြောင့် ဤသရုပ်ပြတွင် ကျွန်ုပ်တို့သည် href="#" ကို အသုံးပြုပါသည်။ လက်တွေ့ဘဝတွင် ၎င်းသည် သီးခြားစာမျက်နှာတစ်ခုသို့ တကယ့် URL ဖြစ်သင့်သည်။
အဆင့် 2) CSS ကိုထည့်ပါ
ရှာဖွေရေးဘောက်စ်နှင့် လမ်းညွှန်ချက်မီနူးကို ပုံစံထုတ်ပါ-
ဥပမာ
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation
menu */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the navigation links */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
ဥပမာ
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul =
document.getElementById("myMenu");
li =
ul.getElementsByTagName("li");
// Loop through all
list items, and hide those who don't match the search query
for (i = 0; i <
li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
</script>
အကြံပြုချက်- case-sensitive ရှာဖွေမှုကို လုပ်ဆောင်လိုပါက toUpperCase() ကို ဖယ်ရှား ပါ။
အကြံပြုချက်- ဇယားများကို စစ်ထုတ်နည်း ကိုလည်း စစ်ဆေးကြည့်ပါ ။
အကြံပြုချက်- စာရင်းများကို စစ်ထုတ်နည်း ကိုလည်း စစ်ဆေးကြည့် ပါ ။