Skip to content

Live Search Setup: Add Instant Search to Any Page

GRATIS includes a zero-dependency live search that queries the WordPress REST API.

Add Search to Any Page

Insert an HTML block and add:

<div class="gratis-search-wrap">
  <input type="search" class="gratis-search-input" 
         placeholder="Search posts, pages, products..."
         autocomplete="off">
</div>

How It Works

  • Debounces input by 200ms to avoid excessive API calls
  • Queries /wp-json/wp/v2/search with the search term
  • Shows results in a dropdown with type badges (post, page, product)
  • Keyboard navigation: Arrow keys to navigate, Enter to open, Escape to close

Customizing the Search

The search uses CSS custom properties from theme.json. Override in your child theme or Global Styles.