如何创建：搜索菜单

学习如何使用 JavaScript 创建搜索菜单来过滤链接。

创建搜索菜单

第一步 - 添加 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>

Bilangguan:Sa ganitong demo, gamit namin href="#"dahil wala kaming maaaring ilinink na pahina. Sa tunay na sitwasyon, ito ay dapat na isang tunay na URL ng pahina na itinalaga.

Ikalawa hakbang - Magdagdag ng CSS:

Iset ang estilo ng kahon ng search at menu ng navigation:

/* Nagtatakda ng estilo ng kahon ng search */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}
/* Nagtatakda ng estilo ng menu ng navigation */
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* Nagtatakda ng estilo ng link ng navigation */
#myMenu li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
}
#myMenu li a:hover {
  background-color: #eee;
}

Ikatlong hakbang - Magdagdag ng JavaScript:

<script>
function myFunction() {
  // Pagdeklara ng mga variable
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  // Bumuklas sa lahat ng item ng listahang, at itago ang mga hindi tumutugma sa search query
  magkakaroon ng i sa 0 hanggang sa length ng li
    a = li[i].getElementsByTagName("a")[0];
    kung ang indexOf(filter) na may laki ng a.innerHTML sa uppercase ay mas malaki sa -1
      li[i].style.display = "";
    }
      li[i].style.display = "none";
    }
  }
}
</script>

Subukan ka nang personal

Paalala:Kung gusto mong gawin ang search na may pagkakabanggit ng laki ng mga titik, burahin mo ang toUpperCase().

Kasalukuyang pahina

Tuturial:Kung paano mapag-filter ang talahanayan

Tuturial:如何过滤列表