How To

Cara Membuat Search Menu

Pelajari cara membuat menu pencarian untuk memfilter link dengan menggunakan JavaScript.

Search/Filter Menu

Cara mencari link pada menu navigasi.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Buat kolom layout dengan Flexbox */.row {
  display: flex;
}

/* Kolom kiri (menu) */.left {
  flex: 35%;
  padding: 15px 0;
}

.left h2 {
  padding-left: 8px;
}

/* Kolom kanan (Halaman content) */.right {
  flex: 65%;
  padding: 15px;
}

/* Style search box */#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}

/* Style navigation menu didalam kolom kiri */#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;
}
</style>
</head>
<body>

<h2>Search Menu</h2>
<p>Mulailah mengetik kategori tertentu di dalam bar pencarian untuk "memfilter" opsi pencarian.</p>

<div class="row">
  <div class="left" style="background-color:#bbb;">
    <h2>Menu</h2>
    <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>
  </div>
  
  <div class="right" style="background-color:#ddd;">
    <h2>Halaman Content</h2>
    <p>Mulailah mengetik kategori tertentu di dalam bar pencarian untuk "memfilter" opsi pencarian.</p>
    <p>Ini teks..Ini teks..Ini teks..Ini teks..Ini teks..Ini teks..Ini teks..Ini teks ..</p>
    <p>Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain ..</p>
    <p>Ini teks..</p>
  </div>
</div>

<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>

</body>
</html>

Membuat Search Menu

Langkah 1) Tambahkan HTML

Contoh:

<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>

Catatan: Kami menggunakan href = “#” dalam demo ini karena kami tidak memiliki halaman untuk ditautkan. Dalam penggunaan nyata, ini harus berupa URL asli yang menuju halaman tertentu.

Langkah 2) Tambahkan CSS

Atur Style search box dan menu navigasi.

Contoh:

/* Atur Style search box */#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}

/* Atur Style navigation menu */#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Atur Style navigation link */#myMenu li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
}

#myMenu li a:hover {
  background-color: #eee;
}

Langkah 3) Tambahkan JavaScript

Contoh:

<script>
function myFunction() {
  // Deklarasikan variabel
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");

  // Ulangi semua list item, dan sembunyikan semua list yang tidak cocok dengan kueri pencarian
  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>


Catur Kurnia Sari

Share
Tags: How To