In this article, we will take a look at the AddSearch Search UI Library that provides you an easy and flexible way of creating a search view for your website. The AddSearch Search UI Library will be referred to as the Search UI Library in this article.

The article covers some of the basic concepts of the Search UI Library and compares how the Search UI Library fits with the other methods of creating a search view. We will provide you information about why you should use the Search UI Library and who benefits the most from creating the search view with the Search UI Library.

AddSearch Search UI Library

For creating a search view with the Search UI Library, you need knowledge on implementing the search view on the search page, the components and settings you have at your disposal, and the general functions to modify the search view behaviors.

Implementing the search view

The Search UI Library allows you to implement the search view from a set of ready-made and customizable components you can organize on the search page based on your preferences.

To implement a search view with the Search UI Library, you need to:

• Create the search page
• Include the AddSearch
  • JavaScript client
  • Search UI Library
  • Search UI CSS
• Create the containers for the components
• Create instances of the AddSearch JavaScript client and the AddSearch Search UI Library
• Add the components and assign them to containers
• Additionally, add settings to components
• Start the Search UI Library instance

Please visit a basic example of the search view to see the source code.

Components, component settings and functions

The Search UI Library provides a set of components that allow you to create anything between a simple search containing a search field coupled with the search results to an advanced search with components for filtering, sorting, and faceted search, amongst other things.

The Search UI Library contains the following components:

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

Each component has settings you can use to add or modify functionalities of the component. For instance, you can add a button next to the Search Field and add functionality that updates the search results as you type.

The general functions allow you to modify the behaviors of the search. For instance, you can create a close button that hides the autocomplete component.

Visit the example page to test the Search UI Library components.

For more information, visit the Search UI Library reference at NPMJS.

Comparing methods of creating search views

In addition to the Search UI Library, AddSearch provides other ways of creating the search view; the ready-made search views, the REST API, and the AddSearch Search API Client for JavaScript. We will refer to the REST API and the Search API Client for JavaScript as REST API in this article.

The ready-made search views require you to have basic knowledge of HTML. However, compared to the Search UI Library and the REST API, customizing the ready-made search views is more limited. For instance, the Widget view (search as you type) combines two components; the search field and the search results. While the Widget’s components are fixed, you can extend the functionalities with settings.

The REST API provides you the opportunity to code the search view from scratch. While you can freely organize the search components to the search page and customize the styling the way you like, this approach requires technical expertise. Creating the search view with the REST API takes more time compared to the ready-made search views and the Search UI Library.

The Search UI Library consists of ready-made, customizable components you can organize to the search page the way you like. While creating the search view with the Search UI Library requires some knowledge in HTML, CSS, and Javascript, it is reasonably quick and easy to set up.

Search UI Library, the best of both worlds

Where does the Search UI Library fit amongst the other methods of creating the search view? The Search UI Library sits somewhere in between the ready-made search views and REST API in terms of the required technical expertise as well as with the possibilities of customizing the search view.

Similarly to the ready-made search views, the Search UI Library contains ready-made and customizable components. Unlike the ready-made search views, you can configure each ready-made component in the Search UI Library individually.

Just like coding the search from scratch with the REST API, you can place the components anywhere you like on the search page with the Search UI Library. While creating the search view with the Search UI Library requires some technical expertise, it is relatively quick and easy to set up compared to the REST API that requires developing the search view from the ground up.

Who is the Search UI Library for?

The Search UI Library is ideal for web designers and web developers who have some technical expertise. With the Search UI Library, they can create a tailored search view focusing on search design and user experience, spending less time on development.