Search Box

Search Box component is a full-featured search experience with autocomplete and suggestions. Out of the box, the Search Box component offers the following features:

• 🧘 Easy setup: install and configure as you need.
• 🎨 Theming: colors, typography and styling can be customized to match your website.
• 🫡 Autocomplete: as you type, the search box will suggest the most relevant results.
• ✨ AI summary: the search box includes the Chat Box component, that can provide a conversational search tool featuring our Answer Engine capabilities.

Do you want to see some examples in the wild? Check out the Search Box component on this website, on the top left corner.

Installation

To install the Orama UI Components library, you can follow the instructions here.

Usage

The Search Box supports a vast number of options and configurations. You can find the full list of options and examples in the Storybook.

Option	Description	Default
index	The index configuration. An object with the endpoint and api_key properties. These are the Endpoint URL and Public API Key of your index.	Required when clientInstance is not specified.
clientInstance	The OramaClient instance to use for the search and answer engine.	Required when index is not specified.
open	Whether the search box is open or not. You can use a Search Button to toggle it.	false
placeholder	The placeholder text for the search box	Search...
sourceBaseUrl	The base URL for the search results.	Empty
sourcesMap	An object to mapping your document properties with the ChatBox source results.	{}
resultMap	An object to mapping your document properties with the SearchBox results.	{}
suggestions	An array of suggestions to display in the initial state.	[]

Example

Here is a basic example of how to use the Search Box component in your application using React.

import { OramaSearchBox } from '@orama/react-components';

<OramaSearchBox
  placeholder="Search something..."
  index={{
    endpoint: 'https://your-index-endpoint-url',
    api_key: 'YOUR_PUBLIC_API_KEY'
  }}
  resultMap={{
    title: 'name',
    description: 'content',
    section: 'category',
  }}
/>