1. Keyboard Shortcut: Ctrl + /
When users press Ctrl + / (or Cmd + / on Mac), the modal opens automatically—unless the focus is inside an input or textarea.
This feature can be toggled in the plugin settings via trigger.ctrl_slash.
2. Focus on input[name="s"]
Perfect for traditional WordPress themes. When the user clicks on a search input field with name="s", the modal will open automatically. Requires trigger.input_focus to be enabled in settings.
<input type="search" name="s" placeholder="Search...">
3. Triple Click on Page
If a user clicks three times in a row on an empty part of the page (not on buttons, links, or inputs), the modal will open. Useful for minimalist layouts.
Controlled by the trigger.triple_click option.
4. Anchor Link with href="#init-live-search"
Simply add an anchor tag with this href, and the plugin will listen for the click to open the modal.
<a href="#init-live-search">Open Search</a>
5. Via URL (Deep Linking)
You can open the modal by navigating to a URL with either:
?modal=searchor#search
You can also prefill the search input using the term parameter:
?modal=search&term=your+keyword
The modal will automatically open on page load and start searching.
6. Using data-ils Attributes
Add data-ils to any HTML element to open the modal and prefill it with a slash command.
<button data-ils="/related">Related Posts</button>
<a href="#" data-ils="/fav">Your Favorites</a>
Great for buttons, links, menu items, spans—anything you want.
7. Quick Search Tooltip (Text Selection)
When a user highlights a phrase (1 to 8 words, configurable), a “Quick Search” tooltip appears. Clicking it opens the modal and performs a search with the selected text.
A smart way to search based on recently read content.
Summary Table: Modal Trigger Methods
| Method | Trigger | Description |
|---|---|---|
| Keyboard Shortcut | Ctrl + / | Works globally unless in an input field |
| Focus Input | <input name="s"> |
Opens modal when search box is clicked |
| Triple Click | Click 3 times | Triggers modal in empty page areas |
| Anchor Link | href="#init-live-search" |
Simple integration with menus or buttons |
| URL | ?modal=search |
Supports deep linking and CTAs |
data-ils Attribute |
data-ils="/related" |
Opens modal and runs slash command |
| Quick Search Tooltip | Text selection | Tooltip appears on selection, triggers search |
Conclusion
Init Live Search doesn’t limit you to just one way to launch the search modal. Whether it’s via keyboard shortcut, input focus, anchor link, URL, or contextual UI elements—every method is optimized for flexibility and speed.
Pick the ones that best fit your user experience—or combine several for maximum convenience.
Comments