Search UI
Easy to use search components to quickly build a beautiful search interface. If you've used previous versions of our React SDK, you'll be most familiar with this package.
Let's run through building an example UI using the @sajari/react-search-ui
package.
1. Install
Install the package using yarn add
or npm install
.
2. Import
These will be required to build the UI.
3. Pipeline
A Pipeline
is required to perform search queries. For this example, we'll use a demo pipeline using a Best Buy data set. Replace the values from your collection credentials.
4. Fields
The FieldDictionary
class is used to map fields in your data to the required fields to display in the UI. See the FieldDictionary
docs for possible properties and values.
5. Filters
Filters must be created using the FilterBuilder
and RangeFilterBuilder
classes. Here we'll create some common examples for an ecommerce application:
6. App
Create a demo app, using the following search UI components:
Input
- Used to capture query input via a text field. It can also provide suggestions, typeahead and instant search modes.Summary
- Used to display display the number of results and the latency from a search query.Sorting
- Used to capture user input on how to sort search resultsResultsPerPage
- Used to capture user input for how many results displayed per page.ViewType
- Used to allow toggling between viewing modes of results.Filter
- Used to render filter options allowing refining of search results.Results
- Used to display results response from a search query.Pagination
- Used for paging through paged result sets.
7. SearchProvider
The SearchProvider
should be used as a wrapper for the entire application to provide a way to share application state between components, for example, the current query, active filters or the search response. See SearchProvider
for more information.
Completed example
Editable Example
Suggestions
Loading...