Cách tạo: Menu tìm kiếm

Học cách sử dụng JavaScript để tạo menu tìm kiếm để lọc liên kết.

Tìm kiếm/Lọc menu

Cách tìm kiếm liên kết trong menu hướng dẫn:

Menu
Nội dung trang

Vui lòng nhập loại hoặc liên kết cụ thể vào thanh tìm kiếm để "lọc" các tùy chọn tìm kiếm.

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

Thử ngay

Tạo menu tìm kiếm

Bước 1 - Thêm 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>

Lưu ý:Trong演示 này, chúng ta sử dụng href="#"vì chúng ta không có trang liên kết nào. Trong thực tế, điều này nên là URL thực sự của trang cụ thể.

Bước 2 - Thêm CSS:

Đặt kiểu cho ô tìm kiếm và menu định hướng:

/* Đặt kiểu cho ô tìm kiếm */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}
/* Đặt kiểu cho menu định hướng */
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* Đặt kiểu cho liên kết định hướng */
#myMenu li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
}
#myMenu li a:hover {
  background-color: #eee;
}

Bước 3 - Thêm JavaScript:

<script>
function myFunction() {
  // Định nghĩa biến
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  // Lặp qua tất cả các mục danh sách và ẩn những mục không khớp với truy vấn tìm kiếm
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    }
      li[i].style.display = "none";
    }
  }
}
</script>

Thử ngay

Lưu ý:Nếu bạn muốn thực hiện tìm kiếm phân biệt chữ hoa và chữ thường, hãy xóa bỏ toUpperCase()。

Trang liên quan

Hướng dẫn:Lọc bảng

Hướng dẫn:Cách lọc danh sách