Widget Tìm Kiếm Ẩn: Dự Án Thú Vị Ngày Thứ 4

Chào mừng bạn đến với dự án thứ 4 trong chuỗi 50 dự án trong 50 ngày! Trong bài viết này, tôi sẽ chia sẻ về một widget tìm kiếm ẩn mà tôi đã thực hiện. Dự án này không chỉ thú vị mà còn đơn giản, giúp tôi có một khoảng thời gian thư giãn sau dự án phức tạp trước đó.

Giới thiệu về Dự án

Tôi đã bận rộn trong thời gian gần đây, nhưng giờ tôi đã trở lại với dự án này. Widget tìm kiếm ẩn là một công cụ cho phép người dùng nhập từ khóa tìm kiếm mà không làm rối mắt giao diện. Khi nhấn nút tìm kiếm, thanh tìm kiếm sẽ mở rộng; và khi nhấn lại, nó sẽ thu gọn lại.

Nếu bạn đã bỏ lỡ, hãy xem bài viết của tôi về Ngày 1 đến Ngày 3 để nắm bắt được nội dung trước đó!

Cấu trúc HTML

Dưới đây là cấu trúc HTML cho widget mà tôi đã sử dụng:

html Copy

<div class="search">
  <input class="search-bar" type="text" placeholder="Tìm kiếm..." />
  <button id="search-button"><i class="fa-solid fa-search"></i></button>
</div>

Trong đoạn mã trên, tôi đã tạo một thẻ div với lớp search để chứa thanh tìm kiếm và nút tìm kiếm. Cách bố trí này giúp hai thành phần này nằm cạnh nhau.

Phương pháp thực hiện

Tôi đã sử dụng tính năng flex trong CSS để đặt các phần tử nằm bên cạnh nhau. Ban đầu, chiều rộng của input được đặt là 0, vì vậy nó không hiển thị. Khi người dùng nhấn nút tìm kiếm, chiều rộng của input sẽ mở rộng thành 180px, giúp người dùng dễ dàng nhập từ khóa.

Sử dụng JavaScript

Tôi cũng đã sử dụng phương thức focus() của JavaScript để đảm bảo con trỏ sẽ nhảy vào ô nhập liệu ngay khi nó mở rộng. Đoạn mã JavaScript như sau:

javascript Copy

searchBar.focus();

Sự khác biệt trong phương pháp

Giáo viên của tôi đã có một cách tiếp cận khác. Ô input không được thu gọn hoàn toàn mà giữ lại kích thước 50px (bằng kích thước của nút), sau đó sử dụng thuộc tính position: absolute để đặt nút lên trên nó. Khi nhấn nút, input sẽ mở rộng đến 200px và nút sẽ dịch chuyển sang bên phải bằng thuộc tính transform.

Bài học rút ra

Dự án này đã nhắc nhở tôi rằng hiếm khi có chỉ một cách để thực hiện một điều gì đó. Cả hai phương pháp đều hoạt động tốt, nhưng tôi thích việc khám phá những kỹ thuật khác nhau để đạt được cùng một hiệu ứng. Sau dự án trước đó có phần phức tạp, dự án này thực sự như một khoảng nghỉ.

Thực hành tốt nhất

Tối ưu hóa trải nghiệm người dùng: Đảm bảo rằng thanh tìm kiếm mở rộng và thu gọn mượt mà để cải thiện trải nghiệm người dùng.
Kiểm tra trên nhiều thiết bị: Đảm bảo widget hoạt động tốt trên các thiết bị di động và máy tính để bàn.

Những cạm bẫy phổ biến

Không kiểm tra tính tương thích: Đừng quên kiểm tra widget trên nhiều trình duyệt khác nhau để đảm bảo tính tương thích.
Thiếu hướng dẫn sử dụng: Cung cấp hướng dẫn ngắn gọn cho người dùng về cách sử dụng widget có thể cải thiện trải nghiệm.

Mẹo hiệu suất

Giảm thiểu tải trọng tài nguyên: Sử dụng các thư viện nhẹ và tối ưu hóa mã JavaScript để giảm thiểu thời gian tải trang.
Sử dụng CSS thay vì JavaScript khi có thể: Nhiều hiệu ứng có thể được thực hiện bằng CSS mà không cần đến JavaScript.

Khắc phục sự cố

Nếu bạn gặp vấn đề với widget của mình, hãy kiểm tra:

Console của trình duyệt: Xem có bất kỳ lỗi JavaScript nào không.
CSS: Kiểm tra xem các thuộc tính có đang được áp dụng đúng không.

Kết luận

Dự án widget tìm kiếm ẩn này đã giúp tôi học hỏi nhiều điều mới và phát triển kỹ năng lập trình của mình. Tôi khuyến khích bạn thử nghiệm với các dự án nhỏ như thế này để nâng cao khả năng của mình. Đừng quên theo dõi tôi trong các ngày tiếp theo để xem những dự án thú vị tiếp theo!

Để xem bản demo trực tiếp của dự án, nhấn vào đây.
Để xem mã trên GitHub, nhấn vào đây.

Hẹn gặp lại bạn ở Ngày 5! 🛩️