Hướng dẫn sử dụng sự kiện JavaScript (ils:*) trong Init Live Search

Danh sách sự kiện hỗ trợ

Các sự kiện được phát ra bằng window.dispatchEvent() hoặc new CustomEvent() trong quá trình người dùng sử dụng modal tìm kiếm:

ils:modal-opened

Kích hoạt khi modal tìm kiếm được mở. Không có giá trị event.detail.

ils:modal-closed

Kích hoạt khi modal được đóng. Không có giá trị event.detail.

ils:search-started

Kích hoạt ngay khi người dùng bắt đầu gõ để tìm kiếm. event.detail chứa đối tượng dạng:

{ "term": "từ khóa" }

ils:results-loaded

Kích hoạt khi kết quả đã được render thành công vào modal. event.detail là một đối tượng có cấu trúc như sau:

{
  "count": 10,
  "append": false,
  "command": {
    "cmd": "recent",
    ...
  }
}

ils:result-clicked

Kích hoạt khi người dùng click chuột vào một kết quả trong modal. Không kích hoạt nếu dùng phím Enter để chọn.
event.detail chứa các thông tin sau:

{
  "id": 123,
  "url": "https://example.com/post",
  "title": "Tiêu đề bài viết",
  "type": "post",
  "category": "tin-tuc",
  "command": "recent"
}

Cách sử dụng

Bạn có thể gắn các listener sự kiện vào document hoặc window như sau:

window.addEventListener('ils:result-clicked', e => {
  console.log('Người dùng click vào kết quả:', e.detail);
});

Ứng dụng thực tế

• Thêm hiệu ứng confetti hoặc âm thanh khi kết quả hiển thị thành công.
• Gửi dữ liệu tracking đến Google Analytics hoặc hệ thống riêng khi người dùng thực hiện tìm kiếm hoặc click kết quả.
• Tự động cuộn xuống vùng kết quả hoặc highlight thành phần tùy chỉnh.
• Thêm badge, phân loại hoặc kiểm tra nội dung kết quả để thao tác tiếp (VD: kết hợp WooCommerce).

Lưu ý

• Các sự kiện chỉ phát khi modal đang hoạt động.
• Sự kiện có thể dùng để tương tác với phần tử bên ngoài plugin (VD: đồng bộ UI toàn trang).
• Nếu bạn muốn phát triển thêm sự kiện tùy chỉnh, có thể hook trực tiếp vào mã JS của plugin hoặc đóng góp pull request.

Tổng kết

Hệ thống sự kiện ils:* trong Init Live Search giúp developer dễ dàng mở rộng chức năng mà không cần sửa mã gốc của plugin. Đây là một phần trong triết lý thiết kế “có thể mở rộng tối đa” của Init Plugin Suite.