How to create search experiences with Search UI 1.2.0 | Elastic Blog
Releases

Search UI 1.2.0 released

Search UI is an open source library for building dynamic and engaging search experiences. Since its July release, developers around the world have applied Search UI as the foundation for production-ready search in their websites and applications. And with version 1.2, it’s getting even better.

Read the release notes on GitHub

Search UI and friends

While Search UI works with any search provider, it provides out-of-the-box connectors for Elastic App Search and Elastic Site Search, giving you everything you need to design, develop, and tune search experiences. Both App Search and Site Search build upon Elasticsearch, providing elegant user interfaces, analytics, and management tools for managing and perfecting how your users will interact with search.

What’s new?

The latest version provides three new features that search developers can enjoy.

Search on load

Sometimes you want a search to occur on page load. This can save a user from having to enter a query. Maybe a developer is using App Search to search through server logs and wants a default query for today’s logs to appear when a certain page is visited? Or perhaps have search pull and display documents given the strength of their search analytics?

Doing so is as easy as setting the alwaysSearchOnInitialLoad option to true:

<SearchProvider 
  config={{ 
    alwaysSearchOnInitialLoad: true 
  }} 
>

Batch actions

Typically, search filters are applied when they’re selected. But in the case of something like an "Advanced Search" form, search creators often want filters to be applied when a submit button is pressed. Search UI now supports this flow with minimal effort through two new batching features.

Multiple queries are often needed to express a wide range of filtering options. This can lead to an inflation in query counts, leading to additional costs. To remedy this, actions can now be combined into one concise API request:

setSearchTerm("park"); 
addFilter("states", "Alaska", "any"); 
addFilter("states", "California", "any");

And in the past, Search UI would clear your filters each time you changed the search query. Now you can pass the shouldClearFilters flag to decide whether or not changing the current search term should clear out the current filter selections:

addFilter("states", "Alaska", "any"); 
addFilter("states", "California", "any"); 
setSearchTerm("park", { shouldClearFilters: false }); 
<SearchBoxContainer 
  shouldClearFilters={false} 
/>

Together these features open up the flexible power of batched actions.

Boolean facets

Is your restaurant open for dinner? Good for children? Vegan options? A boolean is an effective toggle that can help searchers who are seeking — or not seeking — specific things. The booleanFacet is a new view which you can use to display true/false filtering choices.

Boolean facets in Search UI 1.2.0

Summary

Search UI is just getting started. With out-of-the-box connectors for Site Search and App Search, you have everything you need to build the deep, engaging, fast, and relevant search for your websites and applications that you’ve always wanted.

Visit GitHub to learn more about Search UI.

Need a search provider to use with Search UI? Check out a free 14-day trial of Site Search or App Search.