Skip to main content

UpSearch Plugin Installation

This guide will walk you through installing and configuring the UpSearch Plugin on your website.

Requirements​

  • Project access token for UpSearch API (apiToken)
  • A page for displaying search results

Adding the Autocomplete​

Add the autocomplete to your page using the following snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    <link href="https://cdn.upsearch.cz/projects/PROJECT/upsearch.css" rel="stylesheet" />
</head>
<body>
    <!-- ... -->
    <div id="suggestElement"></div>

    <script src="https://cdn.upsearch.cz/projects/PROJECT/upSearchSuggest.js"></script>
    <script>
        window.upSearchSuggest('#suggestElement', {
            resultsPageUrlPath: '/search-results',
            apiToken: 'YOUR_API_TOKEN',
        });
    </script>
</body>
</html>

Configuration Parameters​

ParameterDescription
#suggestElementCSS selector for the element where the autocomplete should be inserted
resultsPageUrlPathURL path (pathname) to the search results page
apiTokenProject access token for UpSearch API
Important

The HTML element for the autocomplete must exist when the script runs. The optimal script placement is just before the closing </body> tag.

Asynchronous Initialization​

If you need to run the script asynchronously:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.upSearchSuggest('#suggestElement', {
            resultsPageUrlPath: '/search-results',
            apiToken: 'YOUR_API_TOKEN',
        });
    });
</script>

Adding the Results Page​

Add the upSearchResults component to your results page:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    <link href="https://cdn.upsearch.cz/projects/PROJECT/upsearch.css" rel="stylesheet" />
</head>
<body>
    <div id="resultsElement"></div>

    <script src="https://cdn.upsearch.cz/projects/PROJECT/upSearchResults.js"></script>
    <script>
        window.upSearchResults('#resultsElement', {
            apiToken: 'YOUR_API_TOKEN',
        });
    </script>
</body>
</html>

Removing the Component​

If needed, you can remove the component using the destructor:

const destructSuggest = window.upSearchSuggest('#suggestElement', {
    resultsPageUrlPath: '/search-results',
    apiToken: 'YOUR_API_TOKEN',
});

// Later to remove:
destructSuggest();

Styling​

CSS Structure​

All CSS classes are prefixed with .up-* to prevent conflicts with your website's styles.

styles/
├── base/        # Variables, mixins, typography
├── components/  # Individual component styles
├── core/        # Core elements (input, button, price)
└── layout/      # Layout wrappers

Variable Configuration​

In the variables.scss file you can configure:

VariableDescription
colorsPrimary and secondary colors, link colors
fontsFont family and sizes
zindexZ-index for the entire component (default: 100)
wrapPaddingPadding around the component

CSS Wrappers​

The plugin uses the following ID wrappers:

  • #upsearch - Main wrapper for input and autocomplete
  • #upsearch-button - Wrapper for standalone button
  • #upsearch-results - Wrapper for results page
Specificity

To override styles, use the ID selector:

#upsearch .up-price {
    font-weight: bold;
}

CSS Reset​

The plugin uses a CSS reset for isolation from website styles:

#upsearch {
    all: revert;
}
#upsearch * {
    all: revert;
}

Troubleshooting​

Styles Not Being Overridden​

For websites with high selector specificity, you may need to:

  • Use inline styles
  • Add !important to your custom styles
  • Increase selector specificity

Component Not Displaying​

  1. Check that the element with the given selector exists in the DOM
  2. Verify that the script is loaded after the element
  3. Check the browser console for errors