Chức năng ẩn hiện form search trên website giúp bạn tiết kiệm không gian bằng cách hiển thị thanh tìm kiếm khi người dùng nhấp vào biểu tượng trên header. Bài viết này unitop sẽ giúp bạn tạo chức năng tìm kiếm linh hoạt, dễ dàng.
Tại sao cần ẩn hiện form search trong website?
Nếu bạn có một thanh header website có nhiều nội dung.
Nếu bạn vẫn đưa vào một thanh tìm kiếm, chiếm nhiều không gian sẽ vô tình làm mọi thức chật chội và ngột ngạt khi người dùng truy cập website của mình.
Giải pháp thay thế tôi bắt gặp ở rất nhiều website nước ngoài chính là họ tạo ra một biểu tượng icon tìm kiếm(thường là hình kính lúp), khi người dùng nhấp vào đó sẽ kích hoạt và hiển thị một form tìm kiếm nổi lên.
Tại đây, người dùng điền từ khóa và tiến hành tìm kiếm bài viết, sản phẩm trên website của mình.
Thật tiện lợi đúng không, người dùng có thể tìm kiếm và phần hiển thị trên thanh header hiển thị hợp lý, mang trải nghiệm tốt cho người dùng.
Trong phần tiếp theo chúng ta cùng nhau học cách tạo chứng năng tuyệt vời này…
Cách tạo chức năng ẩn hiện form search bằng Javascript
Để giúp bạn tiện theo dõi, tôi đã dành thời gian để tạo ra video hướng dẫn chi tiết từng bước từng bước một.
Bạn chỉ cần kiếm một vị trí mát mẻ, mở máy tính, bật video lên, xem và làm theo hướng dẫn sẽ hiểu được tư duy, cách triển khai chức năng ẩn hiện thanh tìm kiếm trên website.
Tôi chia sẻ rất nhiều video hữu ích, bạn bấm vào đây để đăng ký kênh và nâng cấp kỹ năng lập trình web của mình!
Code hướng dẫn
Trước tiên bạn hãy tạo dự án có tên show-hide-search-form và các file như bên dưới.
show-hide-search-form/
├──index.html
├──app.jsTạo giao diện
Giao diện chức năng có 2 thành phần chính.
- Icon search(kính lúp)
- Form input tìm kiếm
Bạn mở file index.html và page code html sau vào
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<title>Show hide Search form</title>
</head>
<body>
<style>
*{
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 20vh;
}
#search-container{
position: relative;
}
#search-icon{
font-size: 28px;
cursor: pointer;
}
#search-form{
width: 200px;
position: absolute;
right: 0px;
display: none;
}
#search-form input#keyword{
padding: 6px 9px;
width: 100%;
outline: none;
border: 1px solid #333;
box-shadow: 0 2px 4px rgba(0,0,0, 0.1);
}
</style>
<div id="search-container">
<i id="search-icon" class="fa-solid fa-magnifying-glass"></i>
<form action="" id="search-form">
<input type="text" name="keyword" id="keyword" placeholder="Tìm kiếm...">
</form>
</div>
<script src="app.js"></script>
</body>
</html>
Xử lý ẩn hiện form search khi nhấp vào icon
Sau khi đã xây dựng giao diện html css, bước tiếp theo cần xử lý ẩn hiện form khi người dùng nhấp vào biểu tượng kính lúp tìm kiếm.
Ở đây chúng ta có việc chính cần làm.
- Xử lý ẩn hiện khi nhấp vào biểu tượng tìm kiếm.
- Ẩn form search khi người dùng kích vào không gian bên ngoài
Code hoàn chỉnh ở bên dưới, bạn theo dõi bên dưới và copy code vào file app.js đã tạo bên trên.
document.addEventListener('DOMContentLoaded', function(){
const searchIcon = document.getElementById('search-icon');
const searchForm = document.getElementById('search-form');
searchIcon.addEventListener('click', function(){
if(searchForm.style.display === 'block'){
searchForm.style.display = 'none';
}else{
searchForm.style.display = 'block';
}
});
//CLick out
document.addEventListener('click', function(event){
console.log(event.target);
if(event.target != searchIcon && !searchForm.contains(event.target)){
searchForm.style.display = 'none';
}
});
});
Tổng kết
Bài chia sẻ này tôi đã chia sẻ bạn cách thức tư duy vào cách thực thi tạo chức năng ẩn hiện form tìm kiếm khi nhấp vào biểu tượng ở trên website.
Việc của bạn ngay bây giờ hãy bắt tay vào code từng bước cho tới khi hoàn thành. Nếu quá trình thực hành khó khăn gì hãy để lại chia sẻ ở phần bình luận của video hoặc bên dưới bài viết này.
Tôi biết có thể có nhiều kiến thức mới ở trong bài thực hành này nhưng bạn đừng lo lắng, hãy nỗ lực từng bước một.
Phan Văn Cương và cộng sự
P/s: Nếu bạn gặp khó khăn hãy inbox cho tôi để được tư vấn!
Trước khi chúng ta gặp lại nhau, bạn có thể bấm vào đây để tải và đọc cuốn ebook chia sẻ về hành trình vượt qua khó khăn từng bước trở thành một web developer và giờ đây là người dẫn dắt đồng hành giúp hàng ngàn người có công việc thu nhập từ 8-50tr/tháng.
Hẹn gặp lại!