- 1. Mở modal bằng phím tắt Ctrl + /
- 2. Mở modal khi người dùng focus vào ô input[name="s"]
- 3. Mở modal bằng triple-click
- 4. Mở modal bằng liên kết có href="#init-live-search"
- 5. Mở modal bằng URL (deep link)
- 6. Mở modal bằng thuộc tính data-ils
- 7. Mở modal bằng tooltip “Quick Search” khi bôi đen văn bản
- Bảng tổng hợp các phương pháp mở modal
- Kết luận
1. Mở modal bằng phím tắt Ctrl + /
Khi người dùng nhấn tổ hợp phím Ctrl + / (hoặc Cmd + / trên Mac), modal sẽ tự động mở nếu không nằm trong input hoặc textarea.
Tính năng này có thể bật/tắt trong phần Cài đặt (tùy chọn trigger.ctrl_slash).
2. Mở modal khi người dùng focus vào ô input[name="s"]
Phù hợp với các theme WordPress truyền thống. Khi người dùng click vào ô tìm kiếm có thuộc tính name="s", modal sẽ tự mở. Cần bật tùy chọn trigger.input_focus trong phần cấu hình plugin.
<input type="search" name="s" placeholder="Tìm kiếm...">3. Mở modal bằng triple-click
Plugin hỗ trợ mở modal khi người dùng click 3 lần liên tiếp vào một vùng trống trên trang (không phải trong nút, link hay input). Rất phù hợp cho các trang không có form tìm kiếm sẵn.
Được điều khiển qua tùy chọn trigger.triple_click.
4. Mở modal bằng liên kết có href="#init-live-search"
Chỉ cần chèn một thẻ <a href="#init-live-search">, plugin sẽ tự động bắt sự kiện và mở modal khi người dùng click vào link.
<a href="#init-live-search">Mở tìm kiếm</a>5. Mở modal bằng URL (deep link)
Có thể mở modal thông qua URL có dạng:
?modal=searchhoặc#search
Ngoài ra, có thể truyền sẵn nội dung tìm kiếm bằng tham số term:
?modal=search&term=từ+khóaModal sẽ tự động mở khi trang load, đồng thời điền từ khóa vào ô tìm kiếm.
6. Mở modal bằng thuộc tính data-ils
Thêm data-ils vào bất kỳ phần tử HTML nào để mở modal và tự động chạy slash command tương ứng.
<button data-ils="/related">Gợi ý bài tương tự</button>
<a href="#" data-ils="/fav">Yêu thích của bạn</a>Khi click, modal mở ra và slash command được điền vào input. Có thể dùng trên mọi thành phần: nút, link, menu, thẻ span…
7. Mở modal bằng tooltip “Quick Search” khi bôi đen văn bản
Nếu người dùng bôi đen một đoạn văn bản từ 1–8 từ (tuỳ cấu hình), plugin sẽ hiển thị một tooltip “Quick Search”. Khi click vào tooltip, modal sẽ mở và thực hiện tìm kiếm từ đoạn văn bản đã chọn.
Đây là tính năng thông minh giúp người dùng tìm nhanh nội dung vừa đọc mà không cần gõ lại.
Bảng tổng hợp các phương pháp mở modal
| Phương pháp | Kích hoạt | Mô tả |
|---|---|---|
| Phím tắt | Ctrl + / | Mở modal mọi lúc, trừ khi đang gõ trong input |
| Focus input | <input name="s"> |
Mở modal khi nhấp vào ô tìm kiếm |
| Triple-click | 3 lần click liên tiếp | Kích hoạt ở vùng trống không phải input/link |
| Link đặc biệt | href="#init-live-search" |
Dễ tích hợp vào giao diện hiện có |
| URL | ?modal=search |
Hữu ích cho deep link hoặc CTA điều hướng |
| data-ils | data-ils="/related" |
Mở modal và chạy lệnh /related tự động |
| Quick Search tooltip | Bôi đen 1–8 từ | Hiện tooltip tìm nhanh, click là mở modal |
Kết luận
Init Live Search không giới hạn bạn ở một phương pháp kích hoạt duy nhất. Bạn có thể lựa chọn (hoặc kết hợp) nhiều cách mở modal sao cho phù hợp nhất với trải nghiệm người dùng của website. Dù là link, phím tắt, vùng chọn văn bản hay nút tùy chỉnh, plugin đều sẵn sàng đáp ứng — nhẹ gọn, không phụ thuộc thư viện bên ngoài.
Bình luận