Skip to main content

Introduction to the AddSearch Search UI Library

This guide explains how to use the AddSearch Search UI Library to build and customize a search interface on your website. The Search UI Library provides ready-made, customizable components that you arrange and configure based on your requirements.

Overview of the Search UI Library​

The Search UI Library lets you implement a full search page by combining components and adjusting their behavior through settings and functions.

How to implement a search view using the Search UI Library​

To create a search interface with the Search UI Library, follow these steps:

  1. Create your search page in your website structure.
  2. Include the required AddSearch assets:
    • AddSearch JavaScript client
    • Search UI Library JavaScript
    • Search UI CSS styles
  3. Create HTML containers to host each UI component.
  4. Initialize instances of the AddSearch JavaScript client and the Search UI Library.
  5. Add desired components to the Search UI Library instance and assign each to its container.
  6. Configure component settings to modify or extend their functionality.
  7. Start the Search UI Library instance to activate the search view.

Refer to this basic example on GitHub for source code demonstrating these steps.

Components and customization options​

The Search UI Library includes multiple components you can combine:

  • Search Field
  • Autocomplete
  • Search Result
  • Pagination
  • Sort By
  • Filters
  • Facets
  • Active Filters

Each component has configurable settings you can use to add features (for example, adding a button next to the search field to update results dynamically).

General functions allow you to control the overall search behavior, such as creating a button to hide the autocomplete component.

Try these components interactively on the AddSearch UI Library example page.

Search UI components example

For detailed API and component documentation, visit the AddSearch Search UI Library package on NPM.

Comparing the Search UI Library with other AddSearch search view options​

AddSearch offers several ways to build a search interface:

  • Ready-made search views: Simple to add with basic HTML knowledge, these views combine key components but offer limited customization. For example, the Widget view integrates search field and results into a fixed layout, extendable through some settings (Widget settings reference).

  • REST API and Search API Client for JavaScript: Lets you develop the entire search interface from scratch using code, offering full control over component layout and style. This requires advanced technical skills and more development time.

  • Search UI Library: Provides pre-built, highly customizable components you can arrange freely on your search page. While it needs intermediate HTML, CSS, and JavaScript knowledge, it allows faster setup and more flexibility than ready-made views, without requiring full custom development.

Positioning of the Search UI Library​

The Search UI Library balances ease of use and customization:

  • Like ready-made views, it provides ready components but allows individual component customization.
  • Like developing from the REST API, it gives you freedom to position and style components as you want.
  • It reduces setup time compared to building a search UI from scratch with the REST API.

Who should use the Search UI Library?​

The Search UI Library is best suited for web designers and developers with moderate technical skills. It helps them build tailored search interfaces focused on search design and user experience without intensive development effort.

For more information on other methods and a comparison, see:

This concludes the overview and basic guidance to get started with the AddSearch Search UI Library.