All the Ways to Trigger Init Live Search Modal via JavaScript

Init Live Search offers a modern search interface with multiple ways to trigger the modal—perfect for any theme, layout, or interaction flow. Here’s a complete guide to every method currently supported by the plugin.

All the Ways to Trigger Init Live Search Modal via JavaScript

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=search or #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


  • No comments yet.

Init Toolbox

Press Ctrl + \ on desktop, or swipe left anywhere on mobile.

Login