Code tìm kiếm sản phẩm html

Tất cả bài viết  |  Bootstrap

Trong bài học lập trình web này các Bạn sẽ được Hướng dẫn thiết kế hộp tìm kiếm theo danh mục sản phẩm cho website

body{    
margin-top:20px;
}

$[document].ready[function[e]{    
$['.search-panel .dropdown-menu'].find['a'].click[function[e] {	
	e.preventDefault[];	
	var param = $[this].attr["href"].replace["#",""];	
	var concept = $[this].text[];	
	$['.search-panel span#search_concept'].text[concept];	
	$['.input-group #search_param'].val[param];	
}];
}];

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

• 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

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần 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

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

Liên hệ