Autocomplete Configuration Options

Configure the Fast Simon Autocomplete widget by setting options on window.__fast_options before the widget loads.

Configuration Structure

Options are set globally on the window object:

window.__fast_options = {
    // Results & Products
    with_product_attributes: true,
    max_ac_products_desktop: 5,
    max_ac_products_tablet: 4,
    max_ac_products_mobile: 3,

    // Search Suggestions
    display_popular_on_empty_term: true,
    display_popular_on_no_results: false,

    // Responsive Breakpoints
    mobileMedieaQuery: { maxWidth: 767 },
    tabletMedieaQuery: { minWidth: 768, maxWidth: 1024 },
    desktopMedieaQuery: { minWidth: 1025 },

    // Behavior
    full_spa: false,
    forceOpenAlways: false,

    // Advanced
    disable_ac_shadow_root: false,
};

Available Options

Results & Products

Option	Type	Default	Description
with_product_attributes	boolean	false	Include product attributes in autocomplete results
with_product_variants	boolean	false	Include product variants in autocomplete results
max_ac_products_desktop	number	5	Maximum number of products shown on desktop
max_ac_products_tablet	number	5	Maximum number of products shown on tablet
max_ac_products_mobile	number	5	Maximum number of products shown on mobile
ac_always_server_search	boolean	false	Always fetch products from the server instead of prioritizing local results from popular products

Search Suggestions

Option	Type	Default	Description
display_popular_on_empty_term	boolean	true	Show popular results when the search input is empty
display_popular_on_no_results	boolean	false	Show popular results when no matches are found
fallback_popular_searches_on_empty_search_suggestions	boolean	false	Show popular search suggestions when term-based suggestions return empty, even if products exist

Responsive Breakpoints

Option	Type	Default	Description
mobileMedieaQuery	{maxWidth: number}	{maxWidth: 767}	Override the mobile breakpoint
tabletMedieaQuery	{minWidth: number, maxWidth: number}	{minWidth: 768, maxWidth: 1024}	Override the tablet breakpoint
desktopMedieaQuery	{minWidth: number}	{minWidth: 1025}	Override the desktop breakpoint

Behavior

Option	Type	Default	Description
full_spa	boolean	false	Enable for Single Page Applications (SPA)
forceOpenAlways	boolean	false	Keep the autocomplete dropdown open at all times
is_chatbot	boolean	false	Enable chatbot mode
fs_avoid_inject_on_interaction	boolean	false	Inject the AC script immediately on page load instead of waiting for user interaction. Useful for Shopify setups
preserve_ac_aria_attributes	boolean	false	Prevent autocomplete from overwriting ARIA attributes on the search input

Custom Functions

Option	Type	Default	Description
parseAcProductTitle	(title: string, productData?: ProductData) => string	undefined	Custom function for transforming product titles before display
parseAcProductPrice	(price: string, productData?: ProductData) => string	undefined	Custom function for transforming product prices before display
parseAcProductCompare	(compare: string, productData?: ProductData) => string	undefined	Custom function for transforming compare-at prices before display

Advanced

Option	Type	Default	Description
disable_ac_shadow_root	boolean	false	Disable Shadow DOM encapsulation. When enabled, global CSS can style the autocomplete widget directly
avoid_bigcommerce_jwt_logged_on_user_check	boolean	false	Skip JWT token verification for logged-in BigCommerce users

How to add custom options:

Add the __fast_options variable to your HTML head within a script tag, for example:

<script>
    var __fast_options = __fast_options || {};
    __fast_options.max_ac_products_desktop = 5;
    __fast_options.max_ac_products_tablet = 3;
    __fast_options.max_ac_products_mobile = 2;
    __fast_options.with_product_attributes = true;
    __fast_options.parseAcProductTitle=(title)=>{
      return title.replaceAll(" ",",");
    };
</script>

Parse Functions with Product Data (Enhanced)

The parse functions (parseAcProductTitle, parseAcProductPrice, parseAcProductCompare) accept an optional second parameter productData containing the complete product object, enabling more sophisticated customization.

Basic Examples (Backward Compatible)

// Simple title transformation - only using first parameter
__fast_options.parseAcProductTitle = function(title) {
    return title.toUpperCase();
};

// Simple price formatting - only using first parameter
__fast_options.parseAcProductPrice = function(price) {
    return "$" + price;
};

Advanced Examples with Product Data

// Add SKU to price display
__fast_options.parseAcProductPrice = function(price, productData) {
    if (productData && productData.sku) {
        return price + " (SKU: " + productData.sku + ")";
    }
    return "$" + price;
};

// Add vendor/brand to product title
__fast_options.parseAcProductTitle = function(title, productData) {
    if (productData && productData.v) {
        return title + " by " + productData.v;
    }
    return title;
};

// Enhanced compare price with discount percentage
__fast_options.parseAcProductCompare = function(comparePrice, productData) {
    if (!comparePrice) return "";
    
    if (productData && productData.p) {
        // Calculate discount percentage
        var discount = Math.round((1 - (parseFloat(productData.p) / parseFloat(comparePrice))) * 100);
        if (discount > 0) {
            return "Was: " + comparePrice + " (Save " + discount + "%)";
        }
    }
    return "Was: " + comparePrice;
};

Available Product Data Fields

The productData parameter contains the following fields:

Field	Description	Type	Example
id	Product ID	string	"prod_123"
sku	Product SKU	string	"SKU-001"
l	Product label/title	string	"Blue T-Shirt"
p	Current price	string	"29.99"
p_c	Compare/original price	string	"39.99"
p_min	Minimum price (variants)	string	"25.99"
p_max	Maximum price (variants)	string	"35.99"
c	Currency	string	"USD"
d	Description	string	"Comfortable cotton..."
v	Vendor/brand	string	"Nike"
t	Primary thumbnail URL	string	"https://..."
u	Product URL	string	"/products/blue-tshirt"
iso	Is on sale	boolean	true
review	Average review rating	number	4.5
reviews_count	Number of reviews	number	125

Important Notes

1. Backward Compatibility: The productData parameter is optional. Existing implementations will continue to work.

2. Null Safety: Always check if productData exists before accessing its properties:

   if (productData && productData.sku) {
       // Safe to use productData.sku
   }

3. Performance: These functions are called for each product, so keep them efficient.

Use Cases

• B2B Stores: Display SKU prominently for business customers
• Multi-Brand Stores: Show vendor/brand in product titles
• Sale Promotions: Calculate and display discount percentages
• Custom Badges: Add "New", "Sale", or "Limited" badges based on product data
• Review Integration: Show ratings or review counts in autocomplete