Code tìm kiếm trong html

---

Learn how to create a search button with CSS.

---

Full-width:

Centered inside a form with max-width:

Try it Yourself »

---

Step 1) Add HTML:

Example

 
 

---

---

Step 2) Add CSS:

Example

* {
  box-sizing: border-box;
}

/* Style the search field */
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

/* Style the submit button */
form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}

/* Clear floats */
form.example::after {
  content: "";
  clear: both;
  display: table;
}

Try it Yourself »

Trong bài học này, chúng ta sẽ tìm hiểu cách tạo bảng có tính năng tìm kiếm với jQuery. Mình sẽ tham khảo cách làm trên trang w3school nhé.

Nội dung chính

• Video – Tạo bảng có tính năng tìm kiếm với jQuery
• Ý tưởng
• Hướng dẫn chi tiết
  • Phần HTML
  • Phần CSS
  • Phần JS

Video – Tạo bảng có tính năng tìm kiếm với jQuery

Ý tưởng

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

+ Lấy giá trị từ ô tìm kiếm. Dùng hàm on keyup để bắt sự kiện nhấn nút trên bàn phím khi nhập liệu vào input.

+ Lọc giá trị của từng hàng trong bảng. Hàng nào có giá trị trùng sẽ hiển thị.

+ Mình dùng một số code trong bài viết Search and Filter table của w3scool. Trong bài đó, họ hướng dẫn bằng code javascript thuần, mình code giữ nguyên html và css, sửa lại thành jquery thay cho js thuần.

Hướng dẫn chi tiết

Phần HTML

Bài viết cùng chủ đề

Bài 22: Tạo hiệu ứng chuyển động với thư viện…

Bài 21: Tạo bảng có tính năng lọc và tìm kiếm với…

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Mình dùng html của w3school. Bạn có thể thêm lưới Bootstrap để căn chỉnh nhanh, đưa bảng vào giữa nhé.

   

      
Name
      
Country
   
   

   

      
Alfreds Futterkiste
      
Germany
   
   

      
Berglunds snabbkop
      
Sweden
   
   

      
Island Trading
      
UK
   
   

      
Koniglich Essen
      
Germany
   
   

Phần CSS

#myInput {
   background-image: url('/css/searchicon.png'); /* Add a search icon to input */
   background-position: 10px 12px; /* Position the search icon */
   background-repeat: no-repeat; /* Do not repeat the icon image */
   width: 100%; /* Full-width */
   font-size: 16px; /* Increase font-size */
   padding: 12px 20px 12px 40px; /* Add some padding */
   border: 1px solid #ddd; /* Add a grey border */
   margin-bottom: 12px; /* Add some space below the input */
}
.myTable {
   border-collapse: collapse; /* Collapse borders */
   width: 100%; /* Full-width */
   border: 1px solid #ddd; /* Add a grey border */
   font-size: 18px; /* Increase font-size */
}
.myTable th, #myTable td {
   text-align: left; /* Left-align text */
   padding: 12px; /* Add padding */
}
.myTable tr {
   /* Add a bottom border to all table rows */
   border-bottom: 1px solid #ddd;
}
.myTable tr.header, #myTable tr:hover {
   /* Add a grey background color to the table header and on hover */
   background-color: #f1f1f1;
}

Phần JS

$(document).ready(function() {
   $('#myInput').on('keyup', function(event) {
      event.preventDefault();
      /* Act on the event */
      var tukhoa = $(this).val().toLowerCase();
      $('#myTable tr').filter(function() {
         $(this).toggle($(this).text().toLowerCase().indexOf(tukhoa)>-1);
      });
   });
});

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.