JSFiddle - React, Tailwind, and code Playground

by klevu

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Klevu JS Library - Quick Search Example</title>
</head>
<body>
    <!-- This is just for JS Fiddle result -->
    <style>body { height: 500px; }</style>
    
    <!--
    This is just a basic HTML form that we will use
    to illustrate some basic auto-suggest functionality.
    -->
    <form action="javascript:void(0);" method="get">
        <label for="search">Search</label>
        <input type="text" name="q" id="search" />
        <p>For example, start slowly typing: eg. backpack, accessories or about</p>
    </form>

    <!--
    Include the Klevu JavaScript Library. We've used the debug
    version here so you can easily debug and find out how things work.
    -->
    <script src="https://js.klevu.com/klevu-js-v2/2.0/klevu_debug.js"></script>
    
    <!--
    This is the template which will render when the Klevu API
    has returned some results to display on the frontend.
    
    The ID `KlevuTemplateAutoSuggestion` is important, please search
    this script for it's usage. You can rename the ID anything you like,
    as long as any other references are also updated.
    -->
    <script type="template/klevu" id="KlevuTemplateAutoSuggestion">
        <% if(data.suggestions.autosuggestion) { %>
            <% if(data.suggestions.autosuggestion.length> 0 ) { %>
                <h2>Suggestions from Klevu API</h2>
                <ul>
                    <% helper.each(data.suggestions.autosuggestion, function(key, suggestion) { %>
                        <li><%=suggestion.suggest %></li>
                    <% }); %>
                </ul>
            <% } %>
        <% } %>

        <h2>Products matching Query: <%=data.settings.term%></h2>
        <% if(data.query.myProductResults) { %>
            <% if(data.query.myProductResults.result.length > 0) { %>
                <ul>
                    <% helper.each(data.query.myProductResults.result, function(key, product) { %>
                        <li>
               ...

JavaScript

/**
 * Wait until the Document enters the interactive state
 * before triggering any of our initialization scripts.
 */
klevu.interactive(function() {
    klevuInit();
});
function klevuInit() {
    var options = {
        url : {
            landing : '/',
            protocolFull: klevu.settings.url.protocol + "//",
            
            // replace this with your own API Endpoint,
            // and include 'v2' in the subdomain for best performance,
            // eg. https://eucs18v2.ksearchnet.com/cs/v2/search
            search: klevu.settings.url.protocol + '//eucs3v2.ksearchnet.com/cs/v2/search'
        },
        localSettings: true,
        search: {
            minChars: 1,
            searchBoxSelector: "#search",
            
            // replace this with your own JS API Key
            apiKey: "klevu-14728819608184175"
        }
    };

    klevu(options);
}

/**
 * We create a brand new event, named `MyFirstEvent`, which we can attach event listeners to.
 * You can rename this event to anything you like, as long as the event listeners are also updated.
 *
 * This event will execute from the time of creation for `maxCount` times with an interval
 * of `delay` or until the event evaluates to true via the fire function.
 * This allows us to check that everything is loaded before triggering the rest of our functionality.
 */
klevu.coreEvent.build({
    name : "MyFirstEvent",
    fire: function(){
        if (
            !klevu.isInteractive
            || klevu.isUndefined(klevu.search)
            || klevu.isUndefined(klevu.search.build)
            || klevu.isUndefined(klevu.searchEvents)
            || klevu.isUndefined(klevu.searchEvents.functions)
            || klevu.isUndefined(klevu.searchEvents.functions.bindAllSearchBoxes)
            || !klevu.getSetting(klevu.settings, "settings.localSettings", false)
        ) {
            return false;
        } else {
            return true;
        }
    },
    maxCount: 500,
    delay:...