How to create: Search Menu

Learn how to use JavaScript to create a search menu to filter links.

Search/Filter Menu

How to search for links in the navigation menu:

Menu
Page Content

Please enter a specific category/link in the search bar to "filter" the search options.

Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..

Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..

Some text..

ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

ရှာဖွေမှားသုံးဆောင်ရာ စာလုံးစံများ

ပုံစံ ၁ - 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="#"

ကိုယ်တိုင် ဘလဒ်များ မရှိသေးပါ။ အခြား အခြေအနေ အရ သည် အချက်အလက် စာမျက်နှာ အား လိုက်နှက်သည်

နည်းပုံတူ - စားပွားရေး ထပ်ပေါင်းရန်

/* နည်းပြတ် လိုက်ခတ်တ် ခုံ အပြုအမူ */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}
/* နည်းပြတ် လိုက်ခတ်တ် ခုံ အပြုအမူ */
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* နည်းပြတ် လိုက်ခတ်တ် ခုံ ပေါ် လိုက်ခတ်တ် ခုံ အပြုအမူ */
#myMenu li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
}
#myMenu li a:hover {
  background-color: #eee;
}

သုံးပုံတူ - ဂျေဟိုဂျီ ထပ်ပေါင်းရန်

<script>
function myFunction() {
  // အမှတ်အသင်း ပြောင်းလဲခြင်း
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  // ခွဲဝေရာများ နှင့် စာလုံး မသည့် အက်ဥပဒ်များ ကို ကွက်လွှတ်ရန် အခြေအနေ လုံး အသုံးပြုရသည်
  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>

ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

အကြောင်းပြချက်:အက်ဥပဒ်ပြောင်းအရေးကို လုပ်ဆောင်ရန် ဖယ်ရှားရမည် toUpperCase()。

ပါဝင်သော စာမျက်နှာ

အညွှန်း:ဘလဒ်ကို စစ်ဆေးရန်

အညွှန်း:如何过滤列表