# Top 10 Applications of SearchBox 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. %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Freact-showcase-examples/packages/web/examples/SearchBoxWithVoiceSearch?fontsize=14&hidenavigation=1&theme=dark] React code + demo for Voice Search %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/voice-search?fontsize=14&hidenavigation=1&theme=dark] 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. %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Freact-showcase-examples/packages/web/examples/SearchBoxWithAutosuggestions?fontsize=14&hidenavigation=1&theme=dark] React code + demo for Auto suggestions %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/auto-suggestions?fontsize=14&hidenavigation=1&theme=dark] 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. %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Freact-showcase-examples/packages/web/examples/SearchBoxWithPopularRecentSuggestions?fontsize=14&hidenavigation=1&theme=dark] React code + demo %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/simple-search?fontsize=14&hidenavigation=1&theme=dark] 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. %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/next/packages/web/examples/SearchBoxWithInstantSearch?fontsize=14&hidenavigation=1&theme=dark] React code + demo for Instant Search %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/instant-search?fontsize=14&hidenavigation=1&theme=dark] 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. %[https://codesandbox.io/s/github/appbaseio/reactivesearch/tree/feat%2Freact-showcase-examples/packages/web/examples/SearchBoxWithPillSuggestions?from-embed] React code + demo %[https://codesandbox.io/s/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/pill-suggestions?from-embed] Vue code + demo ### 6\. Keyboard Shortcut to Focus Configure familiar keyboard shortcuts and keyboard accessibility for your SaaS power users. %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/next/packages/web/examples/SearchBoxWithKeyboardShortcuts?fontsize=14&hidenavigation=1&theme=dark] React code + demo for keyboard shortcuts %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/focus-shortcuts?fontsize=14&hidenavigation=1&theme=dark&view=preview] 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. %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Freact-showcase-examples/packages/web/examples/SearchBoxWithFeaturedSuggestions?fontsize=14&hidenavigation=1&theme=dark] React code + demo for Featured Suggestions %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-000/packages/vue/examples/search-showcase/featured-suggestions?fontsize=14&hidenavigation=1&theme=dark] Vue code + demo for Featured Suggestions ### 8\. Question Answering with AIAnswer This is a simple AI question answering UI that uses the [AIAnswer component](https://docs.reactivesearch.io/docs/reactivesearch/react/search/aianswer/) along with SearchBox and ReactiveList. %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Freact-showcase-examples/packages/web/examples/AIAnswer?fontsize=14&hidenavigation=1&theme=dark] React code + demo for AIAnswer %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/ai-answer-simple?fontsize=14&hidenavigation=1&theme=dark] 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. %[https://codesandbox.io/embed/github/awesome-reactivesearch/qna-rick-and-morty/tree/main/?fontsize=14&hidenavigation=1&theme=dark] React code + demo for question answering with follow-up questions support %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/movie-search-ai-demo?fontsize=14&hidenavigation=1&theme=dark] 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. %[https://codesandbox.io/embed/github/awesome-reactivesearch/ask-reactivesearch/tree/main/?fontsize=14&hidenavigation=1&theme=dark] React code + example for SearchBox showing an AI Answer %[https://codesandbox.io/embed/github/appbaseio/reactivesearch/tree/feat%2Fjust-for-csb-001/packages/vue/examples/search-showcase/searchbox-inline-ai-response?fontsize=14&hidenavigation=1&theme=dark] 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)](https://github.com/appbaseio/reactivesearch) 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](https://dashboard.reactivesearch.io/signup?utm_source=blog&utm_medium=blog&utm_campaign=reactivesearchio) Stay tuned for more updates and features in the ReactiveSearch UI library. Happy shipping!