Cách tạo thanh tìm kiếm ẩn bằng HTML, CSS và JavaScript

Chí Vỹ

Tạo thanh tìm kiếm mở rộng bằng HTML, CSS và JavaScript không khó. Dưới đây là hướng dẫn chi tiết từng bước.

Tạo thanh tìm kiếm ẩn

Các nhân tố GUI tương tác giúp ứng dụng dễ sử dụng hơn. HTML mặc định bao gồm một số thành phần biểu mẫu, nhưng bạn sẽ muốn dùng CSS để chúng phù hợp với thiết kế. Bạn có thể dùng JavaScript để mở rộng hoặc chỉnh sửa hoạt động của chúng.

Bạn có thể tạo những thành phần đó bằng một thư viện như Tailwind. Tuy nhiên, biết cách tạo chúng từ đầu vẫn hữu ích. Dưới đây là cách tạo thanh tìm kiếm ẩn bằng HTML, CSS và JavaScript.

Tạo cấu trúc nội dung bằng HTML

Đây là code HTML cho tính năng này. Bạn sẽ có thành phần cha, chứa một nhân tố nhập và một nút bấm. Bạn cũng sẽ nhập các tập lệnh font-awesome cho icon tìm kiếm. Trong trường hợp này, bạn sẽ dùng icon tìm kiếm hình kính lúp.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/d69fb28507.js" crossorigin="anonymous"></script>
    <title>Hidden Search Bar</title>
</head>

<body>
    <div class="parent">
        <input class="input" type="type" placeholder="Search..." />

        <button class="btn">
            <i class="fa-solid fa-magnifying-glass"></i>
        </button>
    </div>
</body>

</html>

Tạo kiểu giao diện bằng CSS

Trong file CSS, bạn cần cung cấp vị trí tương đối của thành phần cha để các nhân tố input và nút bấm di chuyển xung quanh nó.

Bạn cũng sẽ căn chỉnh cả hai yếu tố ở trung tâm để nhìn rõ hơn. Nhưng trên ứng dụng của bạn, bạn có thể chọn để có thanh tìm kiếm bất cứ khi nào cần. Ngoài ra, cung cấp cùng chiều rộng cho cả hai phần tử để chúng có cùng kích thước và không phần tử nào lớn hơn phần tử kia.

Sau đó, bạn phải cho lớp cha một class đang hoạt động ở cả phần tử nhập và nút bấm. Bằng cách này, nó sẽ biến đổi như đã chỉ định bất cứ khi nào phần tử di chuyển.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #d9d9d9;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parent {
    position: relative;
}

.input {
    outline: none;
    border: none;
    border-radius: 100px;
    padding: 5px 10px;
    width: 40px;
    transition: width 0.3s ease;
}

.input::placeholder {
    color: green;
}

.parent.active .input {
    width: 200px;
}

.btn {
    width: 40px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 100px;
    border: none;
    background: green;
    display: inline;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}

.parent.active .btn {
    transform: translateX(210px);
}

.fa-solid {
    color: #ffffff;
}

Kết quả:

Nút bấm được tạo bằng CSS

Thêm tính năng JavaScript

Tiếp theo, viết code JavaScript cho các nhân tố. Đầu tiên, chọn thành phần parent, input và nút bấm bằng phương thức querySelector() của JavaScript.

Sau đó, thêm trình xử lý sự kiện nhấp chuột vào nút. Khi được nhấp vào, nút sẽ chuyển đổi theo lớp đã chọn. Thêm phương thức focus() để đặt tiêu điểm cho phần tử đã chỉ định. Nó bắt đầu nhấp nháy bất cứ khi nào thanh tìm kiếm mở rộng.

let input = document.querySelector(".input");
let btn = document.querySelector(".btn");
let parent = document.querySelector(".parent");

btn.addEventListener("click", () => {
    parent.classList.toggle("active");
    input.focus();
});

Nếu bạn nhấp vào nút, nó sẽ mở thanh tìm kiếm và ngược lại. Nó xuất hiện như hình bên dưới:

Dùng JavaScript tạo thanh tìm kiếm ẩn