Feature enhancement

Hey there Damian!😀 So I built this live search feature for WCFM Marketplace vendor stores, and it works yay. Let me walk you through how it works – I think you could adapt this approach for your Fibo Search plugin with some really nice results.

Structure and Components, the search has three main parts:

1. The HTML structure (search box + results container)
2. CSS styling for a polished, responsive UI
3. JavaScript for the Ajax functionality and user interactions

HTML Structure

<div class="wcfmmp-store-products-search-container">
    <div class="wcfmmp-store-product-search-wrapper">
        <div class="wcfmmp-store-product-search">
            <input type="text" 
                   class="wcfmmp-store-product-search-input" 
                   placeholder="Search products in this store..."
                   data-store-id="123" <!-- Store ID passed dynamically -->
            />
            <div class="wcfmmp-store-product-search-icon">
                <i class="wcfmfa fa-search"></i>
            </div>
        </div>
        <div class="wcfmmp-store-product-search-results"></div>
    </div>
</div>

Notice how I’m using data attributes to pass the store ID – this lets us scope the search to a specific vendor’s products.

JavaScript Logic:

// Initialize variables
let searchTimeout;
const searchInput = $('.wcfmmp-store-product-search-input');
const searchResults = $('.wcfmmp-store-product-search-results');

// Search functionality
searchInput.on('input', function() {
    const searchTerm = $(this).val();
    const storeId = $(this).data('store-id');
    
    // Clear any pending timeouts
    clearTimeout(searchTimeout);
    
    // Only search with 2+ characters
    if (searchTerm.length < 2) {
        searchResults.hide();
        return;
    }
    
    // Debounce to prevent excessive requests
    searchTimeout = setTimeout(function() {
        $.ajax({
            url: wcfm_params.ajax_url,
            type: 'POST',
            data: {
                action: 'wcfmmp_store_product_search',
                search_term: searchTerm,
                store_id: storeId
            },
            beforeSend: function() {
                // Show loading indicator
                searchResults.html('<div class="wcfmmp-store-product-search-loading">Searching products...</div>').show();
            },
            success: function(response) {
                // Process results and render them
                // ...
            }
        });
    }, 300); // 300ms delay for typing
});

The key parts:

1. The debouncing with setTimeout and clearTimeout – this prevents hammering your server when someone types quickly
2. The minimum character check (2+ chars) – reduces unnecessary requests
3. The loading indicator – gives immediate feedback while waiting for results

Direct add to cart i placed aswell:

$(document).on('click', '.wcfmmp-store-product-search-add-to-cart', function(e) {

    e.preventDefault();

    e.stopPropagation();

    const button = $(this);

    const productId = button.data('product-id');

    if (button.hasClass('loading')) return;

    button.addClass('loading');

    // Ajax add to cart

    $.ajax({

        // Ajax parameters

        success: function(response) {

            if (response.success) {

                // Update cart fragments

                $(document.body).trigger('wc_fragment_refresh');

                // Show success message

                button.html('<i class="wcfmfa fa-check"></i> Added!');

                setTimeout(() => {

                    button.html('<i class="wcfmfa fa-shopping-cart"></i> Add to Cart');

                    button.removeClass('loading');

                }, 2000);

            }

        }

    });

});

I think For your Fibo Search plugin, you’d just need to 😅:

1. Adapt the Ajax endpoint to work with your plugin’s namespace
2. Adjust the styling to match your theme
3. Implement the product result rendering logic