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.
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.
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:
Please visit a basic example of the search view to see the source code.
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:
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.
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.
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.
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.
We’re always happy to help with code or other questions you might have. Search our documentation, contact support, or connect with our sales team.