Hướng dẫn tạo khung tìm kiếm giống Google kết hợp với live search

Hướng dẫn tạo khung tìm kiếm giống Google kết hợp với live search

Trong bài Hướng dẫn tạo form live search cho Blog mình đã trình bày cách tạo khung tìm kiếm sử dụng feeds kết hợp với từ khóa tìm kiếm để hiển thị 10 bài viết liên quan đến từ khóa đó. Trong bài hôm này thì cách làm vẫn vậy chỉ nâng cấp giao diện của khung tìm kiếm nhìn bắt mắt hơn và có giao diện gần giống với khung tìm kiếm của Google. Các bạn có thể xem demo ngay trên khung tìm kiếm đầu Blog mình áp dụng với trình duyệt web trên laptop và pc có màn hình 640px trở lên. Dưới đây là toàn bộ code bao gồm css, html và script Copy // CSS <style type='text/css'> .bg_Se {     line-height: 36px;     position: relative; } .bg_Se .gb_Se {     display: inline-block;     position: relative;     min-width: 570px;     background: rgba(0,0,0,0.04);     border: 1px solid rgba(0,0,0,0);     -webkit-border-radius: 4px;     border-radius: 4px;     -webkit-transition: background 100ms ease-in,width 100ms ease-out;     transition: background 100ms ease-in,width 100ms ease-out; } .bg_Se .gb_Se.gb_af {     backg…