# 95: JavaScript cho Nhiều Công cụ Tìm kiếm Tùy chỉnh của Google - Thủ thuật CSS

Mục lục

Tất cả các Công cụ Tìm kiếm Tuỳ chỉnh của Google của chúng tôi đã được thiết lập (chúng tôi thiết lập một Công cụ Tìm kiếm Tuỳ chỉnh khác nhau cho mỗi phần của trang web). Giao diện người dùng cho tìm kiếm của chúng tôi đã sẵn sàng hoạt động. Chúng tôi có sẵn các mẫu cho mỗi trang con kết quả tìm kiếm. Chúng tôi chỉ còn một bước cuối cùng để gắn kết mọi thứ với nhau: làm cho các liên kết “Tìm kiếm trong:” nhỏ hoạt động.

Chúng tôi đã chuẩn bị rất nhiều ở đây nên việc này sẽ khá dễ dàng. Tất cả những gì chúng ta cần làm là thay đổi actionthuộc tính trên biểu mẫu chứa biểu mẫu tìm kiếm của chúng ta khi bạn nhấp vào các khu vực khác nhau để tìm kiếm. Nội dung jQuery dễ dàng dễ dàng nếu tôi đã từng thấy nó.

Đối với mỗi liên kết “Tìm kiếm trong:”, chúng tôi sẽ cung cấp cho nó một data-urlthuộc tính. Thuộc tính này sẽ giữ giá trị mà chúng ta dự định chuyển đến actionthuộc tính của biểu mẫu khi liên kết được nhấp vào. Đó chính xác là những gì chúng tôi làm chỉ trong một vài dòng JS. Chúng ta thảo luận ngắn gọn về cách phương thức .attr () có thể vừa là “getter” vừa là “setter”, một điều phổ biến trong jQuery.

Chúng tôi dành thời gian còn lại để viết thêm một chút CSS và jQuery để đặt lớp “hoạt động” trên các liên kết, để khi người dùng nhấp vào “Diễn đàn” (hoặc bất kỳ diễn đàn nào khác), họ nhận được phản hồi rằng giới hạn tìm kiếm hiện đang hoạt động (chuyển sang màu trắng và được gạch chân, giống như mặc định).

thú vị bài viết...