Live Search Autocomplete Builder

Live Search enhances your website's existing search input box with instant, real-time autocomplete suggestions as the visitor types. It combines instant exact SKU matching with semantic AI search to return relevant products, articles, prices, and thumbnails before the customer even hits Enter.

1. Features & Capabilities

• Real-Time As-You-Type Dropdown: Displays search suggestions dynamically within milliseconds of typing.
• Exact SKU & Tag Priority: If a customer types an exact product SKU (e.g. WH-1000 or B09XYZ), the exact product is pinned to the top of the suggestions.
• Semantic Understanding: Typo-tolerant and concept-aware matching ensures customers find products even if their phrasing differs from your catalog titles.
• Thumbnail Images & Prices: Conditionally displays product thumbnails and localized price badges (Price: $49.99) directly inside the autocomplete list.
• Zero Layout Shift: Attaches directly beneath your current search field without interfering with your existing header design.

2. Customizing Live Search

Navigate to the Live Search section (section=livesearch) on your dashboard.

Subtab 1: ⚙️ Configuration

┌─────────────────────────────────────────────────────────────────────────────┐
│  Target Form Container Class:  "sbpro-search-container"                     │
│  Search Field Name or ID:      "q"                                          │
│  Results "Price" Label:        "Price: "                                    │
│  Display Thumbnail Images:     Enabled (Show Thumbnails) / Disabled         │
│  Dropdown Background Color:    #ffffff                                      │
│  Link / Text Color:            #1e293b                                      │
│  Hover Color:                  #2563eb                                      │
└─────────────────────────────────────────────────────────────────────────────┘

1. Target Form Container Class: The CSS class of the <form> or <div> on your website that wraps your search input box (e.g. sbpro-search-container, header-search, or site-search).
2. Search Field "Name" or ID: The name or id attribute of your keyword text input field:
   • WordPress: typically s
   • Shopify: typically q
   • SiteStorePro: typically keyword or search_query
3. Results "Price" Label: The prefix displayed next to product prices in the autocomplete dropdown (e.g. "Price: " or "MSRP: ").
4. Display Thumbnail Images Toggle: Show compact product thumbnails beside each autocomplete suggestion.
5. Colors & Appearance: Configure background color, text link color, and hover state colors.

Subtab 2: 🎨 Custom CSS

• Add custom stylesheet rules that compile directly into your hosted CDN stylesheet (livesearch.css).
• Inspect the default stylesheet structure in the read-only reference box.

Subtab 3: 🌐 UI Translations

• Select target secondary languages (e.g. Spanish, French, German).
• Localize Live Search-specific strings:
  • Search Placeholder
  • Price Label Prefix (e.g. Precio: )
  • Min Characters Error Message
  • No Results Found Message
• Use ✨ AI Auto-Translate for instant one-click translation of all UI labels into the target language.

3. Installing on Your Website

1. In the builder, click Save & Publish Changes to deploy your settings.
2. Copy the pre-built JavaScript script tag:

<!-- Visperity Live Search Autocomplete Embed -->
<script async src="https://d269dlq2mxc0w4.cloudfront.net/v4/YOUR_DATASET_KEY/livesearch.js"></script>

3. Paste this script tag into your website template right before the closing </body> tag on pages that contain your header search bar.
4. Ensure your search input matches the Container Class and Field Name configured in your settings:

<!-- Example Search Bar HTML -->
<div class="sbpro-search-container">
    <form action="/search-results" method="GET">
        <input type="text" name="q" placeholder="Search products..." />
        <button type="submit">Search</button>
    </form>
</div>

4. Complete Field & Setting Reference