SearchBox

Basic Setup & Configuration

1. How do I import and use the SearchBox component?

You can import the SearchBox component from @unbxd-ui/react-search-components:

import { UnbxdSearchCSRWrapper } from '@unbxd-ui/react-search-components';
import { SearchBox } from '@unbxd-ui/react-search-components';
 
<UnbxdSearchCSRWrapper>
  <SearchBox />
</UnbxdSearchCSRWrapper>

2. How can I configure submit on enter or submit with button?

Enable search submission through multiple methods:

• Enter Key Submission: Set submitOnEnter to true to allow users to submit by pressing Enter.
• Button Submission: Set showSubmitButton to true to display a submit button.
• Both can be used together to give users multiple submission methods.

3. Can I choose between delaying the API call or immediate API call?

Yes, The SearchBox uses conditional debouncing based on debounce, showSubmitButton, and submitOnEnter props. When debounce is true and neither submit button nor Enter submission is enabled, queries are debounced using the delay prop. Otherwise, searches execute immediately on input change or require explicit submission via button/Enter key.

4. How can I add a clear button to the SearchBox to clear the query text?

The SearchBox component has built-in clear button functionality. Enable it by setting the showClear prop to true. See how to use here.

Query Behavior & State Management

1. What happens when the query is empty in SearchBox?

When the query is an empty string, no API call is made to prevent unnecessary requests. However, when search execution is triggered with an empty input, the SearchBox converts it to a wildcard query ("*") for search execution.

2. Can I make repetitive calls for same query in SearchBox?

By default, the SearchBox prevents duplicate API calls for the same query. The forceReload prop controls this behavior:

• When true: Triggers a new search request even for repeated queries
• When false (default): Ignores duplicate queries to prevent unnecessary API calls

This is useful when you need fresh results for the same query or want to bypass caching behavior.

3. What events are fired and how do I handle focus and blur events in SearchBox?

The SearchBox fires several events during user interactions and internal operations. It fires "QUERY_UPDATED" events when search queries are executed through the useQuery hook. Additionally, it triggers callback events like onQueryChange when the input value changes, onFocus when the input gains focus, and onBlur when the input loses focus. When autosuggest is enabled, it fires onItemClick and onItemHover events for suggestion interactions. Use the onFocus and onBlur callback props to handle focus and blur events - these receive an object with the current query value and are useful for tracking user interactions, managing autosuggest visibility, or implementing custom behavior based on input focus state.

4. How are special characters handled when entered in the search query?

The SearchBox component handles special characters automatically:

• Special characters are URL-encoded when sent to the search API.
• No client-side encoding or escaping is needed.
• Characters like +, -, " may act as search operators depending on your configuration.
• All special characters are allowed in search queries.

5. Can I use multiple searchbox components on the same page?

Yes, you can use multiple searchbox components on the same page. All searchbox components share the same query state through the useQuery hook, so they will stay synchronized when used together.

Event Handling & Callbacks

1. What all callback functions can I use with SearchBox?

The SearchBox provides several callback functions:

• onQueryChange Fires when input value changes.
• onFocus and onBlur handle focus events with the current query value.

Styling Customizations

1. Does the React Search SDK provide any built-in CSS for SearchBox?

Yes, the React Search SDK provides built-in CSS styles for the SearchBox component. To use the default styles, import the CSS file in your application:

import '@unbxd-ui/react-search-components/styles/searchbox.css';

This provides basic styling for the SearchBox including input field, buttons, and container elements. You can override these styles with your own CSS or use the styles prop to apply custom classes.

2. Can I customize SearchBox styling and appearance?

Yes, you can customize the SearchBox appearance using the styles prop with CSS classes for different elements. Click here to see how to use it.