At ReactiveSearch, we're big fans of search user experience, and with the emerging use cases around web search and generative AI, it's time to re-think the SearchBox (and Search UIs as a whole) user experience that our customers can use.

We've curated the top 10 applications of SearchBox along with interactive consumer-grade search demos in React and Vue.

1. Voice Search

This example demonstrates how to enable voice search by setting the showVoiceSearch prop to true. This adds a microphone icon to the search box, allowing users to search using their voice instead of typing. This can be especially useful for users on mobile devices or for those with accessibility needs.

React code + demo for Voice Search

Vue code + demo for Voice Search

2. Auto suggestions

This example demonstrates how to enable auto-suggestions. When the autosuggest prop is set to true, the SearchBox will query the search index for suggestions based on the user's input.

React code + demo for Auto suggestions

Vue code + demo for Auto suggestions

3. Auto Suggestions + Popular + Recent Suggestions

This example shows how to enable popular and recent suggestions along with auto-suggestions based on a search index. Both popular and recent suggestions are powered by ReactiveSearch analytics captured from end-users and offer search time configurations for setting index, and minimum thresholds for characters, hits and # of times a query is searched.

React code + demo

Vue code + demo

4. Instant Search

This example demonstrates how to enable instant search by setting the autosuggest prop to false. With instant search, users can instantly see the effect of searching at each keystroke on the facets and results.

React code + demo for Instant Search

Vue code + demo for Instant Search

5. Instant Search + Suggestions As Pills

There are times when you want to get the best of both worlds: Display results instantly along with showing possible autocomplete extensions to the user. This example uses controlled behavior with a custom rendering of suggestions to achieve this.

React code + demo

Vue code + demo

6. Keyboard Shortcut to Focus

Configure familiar keyboard shortcuts and keyboard accessibility for your SaaS power users.

React code + demo for keyboard shortcuts

Vue code + demo for keyboard shortcuts

7. Featured Suggestions

Featured (aka curated) suggestions that show up as default suggestions, and provide for rich interactive behavior such as custom styling, navigate on click and more. One can set featured suggestions using the point-and-click interface of the ReactiveSearch dashboard and then display them alongside auto-suggestions, and popular or recent suggestions.

React code + demo for Featured Suggestions

Vue code + demo for Featured Suggestions

8. Question Answering with AIAnswer

This is a simple AI question answering UI that uses the AIAnswer component along with SearchBox and ReactiveList.

React code + demo for AIAnswer

Vue code + demo for AIAnswer

9. Question Answering with follow-up questions

Same same as question answering with AIAnswer component but also allow your users to ask follow-up questions. AI Answer component supports custom rendering allowing you as a developer to provide a rich user experience while leveraging ReactiveSearch's query structure.

React code + demo for question answering with follow-up questions support

Vue code + demo for question answering with follow-up questions support

The SearchBox component auto-adjusts its height to up to three rows to allow for a question.

10. AI Answering integrated into SearchBox

SearchBox as a Swiss army knife where your users get an answer along with suggestions. Props allow configuring how this can work seamlessly.

React code + example for SearchBox showing an AI Answer

Vue code + demo for SearchBox showing an AI Answer

Summary

In this post, we just showcased the top 10 applications of SearchBox UI to create an engaging user experience.

SearchBox and ReactiveSearch UIs are open-source (Apache 2.0 licensed) and designed to work with a ReactiveSearch cloud instance.

ReactiveSearch cloud is a reverse proxy for your favorite search engines and provides a no-code control plane to author search pipelines (connect your favorite search engines, use pre-built stages or add JavaScript processing stages), build and ship UIs and get insights into your search.

Sign up for a free 14-day trial of ReactiveSearch cloud

Stay tuned for more updates and features in the ReactiveSearch UI library. Happy shipping!