SearchBox

SearchBox creates a search box UI component that is connected to one or more database fields. A SearchBox queries the appbase.io backend with query type suggestion to render different kind of suggestions, read more about the suggestion query type here.

Example uses:

• Searching for a rental listing by its name or description field.
• Creating an e-commerce search box for finding products by their listing properties.
• Creating a product catalog search based on different categories.

Usage

Basic Usage

<SearchBox 
    componentId="SearchBoxSensor" 
    dataField={['group_venue', 'group_city']} 
/>

Usage With All Props

    <SearchBox
        componentId="SearchBoxSensor"
        dataField={[
            {
                "field": "group_venue",
                "weight": 1
            },
            {
                "field": "group_city",
                "weight": 3
            }
        ]}
        title="Search"
        mode="tag" // accepts either of 'select' or 'tag', defaults to 'select'
        defaultValue="Songwriting"
        placeholder="Search for cities or venues"
        autosuggest={true}
        highlight={true}
        highlightField="group_city"
        queryFormat="or"
        fuzziness={0}
        debounce={100}
        react={{
            and: ['CategoryFilter', 'SearchFilter'],
        }}
        size={10}
        showFilter={true}
        filterLabel="Venue filter"
        URLParams={false}
        enableRecentSuggestions={true}
        enablePopularSuggestions={true}
        enablePredictiveSuggestions={true}
        popularSuggestionsConfig={{
            size: 3, 
            minHits: 2, 
            minChars: 4,
            index: "" // optional index value to fetch recentsuggestions related to
        }}
        recentSuggestionsConfig={{
            size: 3, 
            minChars: 4, 
            index: "" // optional index value to fetch recentsuggestions related to
        }}
        applyStopwords={true}
        customStopwords={['be','or','hi']}
        onData = {({
            data,
            rawData,
            aggregationData,
            loading,
            error
        }) =>{
                // do something with the updated properties
        }}
        renderItem={(suggestion)=>{
            return <span>{suggestion.label}</span> // custom render every suggestion item in dropdown
        }}
        renderNoSuggestion="No suggestions found"
        endpoint={{
            url:"https://appbase-demo-ansible-abxiydt-arc.searchbase.io/recipes-demo/_reactivesearch.v3", //mandatory
            headers:{
                // relevant headers
            },
            method: 'POST'
        }}            
    />

Props

componentId

unique identifier of the component, can be referenced in other components' react prop.

endpoint

endpoint prop provides the ability to query a user-defined backend service for this component, overriding the data endpoint configured in the ReactiveBase component. Accepts the following properties:

• url String [Required] URL where the data cluster is hosted.
• headers Object [optional]
  set custom headers to be sent with each server request as key/value pairs.
• method String [optional]
  set method of the API request.
• body Object [optional]
  request body of the API request. When body isn't set and method is POST, the request body is set based on the component's configured props.

• Overrides the endpoint property defined in ReactiveBase.
• If required, use transformResponse prop to transform response in component-consumable format.

mode

SearchBox component offers two modes of usage, select & tag. When mode is set to tag SearchBox allows selecting multiple suggestions. Defaults to select.

<SearchBox
    componentId="searchSensor"
    // ... other props
    mode="tag"
/>

dataField

index field(s) to be connected to the component’s UI view. SearchBox accepts an Array in addition to string, which is useful for searching across multiple fields with or without field weights.
Field weights allow weighted search for the index fields. A higher number implies a higher relevance weight for the corresponding field in the search results.
You can define the dataField property as an array of objects of the DataField type to set the field weights.
The DataField type has the following shape:

type DataField = {
    field: string;
    weight: number;
};

database field(s) to be queried against. Accepts an Array in addition to String, useful for applying search across multiple fields. Check examples at here.

Note:

The dataField property as DataField object is only available for ReactiveSearch version >= v3.21.0 and Appbase version v7.47.0.

size

number of suggestions to show. Defaults to 10.

distinctField

One of the most important use-cases this enables is showing DISTINCT results (useful when you are dealing with sessions, events and logs type data). It utilizes composite aggregations which are newly introduced in ES v6 and offer vast performance benefits over a traditional terms aggregation. You can read more about it over here. You can access aggregationData using render prop as shown:

<SearchBox
    distinctField="original_title.keyword"
    render={({aggregationData}) => {...}}
/>

If you are using an app with elastic search version less than 6, than defining this prop will result in error and you need to handle it manually using renderError prop.

It is possible to override this query by providing defaultQuery or customQuery.

Note: This prop has been marked as deprecated starting v3.18.0. Please use the distinctField prop instead.

aggregationSize

To set the number of buckets to be returned by aggregations.

Note: This is a new feature and only available for appbase versions >= 7.41.0.

nestedField

Set the path of the nested type under which the dataField is present. Only applicable only when the field(s) specified in the dataField is(are) present under a nested type mapping.

title

set the title of the component to be shown in the UI.

defaultValue

set the initial search query text on mount.

Data type is Array when mode prop is set to tag.

value

sets the current value of the component. It sets the search query text (on mount and on update). Use this prop in conjunction with the onChange prop.

Data type is Array when mode prop is set to tag.

enableSynonyms

Defaults to true, can be used to disable/enable the synonyms behavior for the search query. Read more about it here

enableIndexSuggestions

Defaults to true. When set to false, index suggestions are not returned from the backend.

indexSuggestionsConfig

Specify additional options for fetching featured suggestions.

It can accept the following keys:

sectionLabel

custom html markup for section title.

size

Maximum number of index suggestions to return. Defaults to 5.

index

Index(es) from which to return the index suggestions from. Defaults to the entire cluster.

    <SearchBox
        enableIndexSuggestions={true}
        indexSuggestionsConfig={{
            sectionLabel: '<h3>Index suggestions</h3>',
            size: 5,
            index: "good-books-ds",  // further restrict the index to search on
        }}
    />

enablePopularSuggestions

Defaults to `false`. When set to `true`, popular searches are returned as suggestions as per the popular suggestions config (either defaults, or as set through `popularSuggestionsConfig` or via Popular Suggestions settings in the control plane). Read more about it over [here](/docs/analytics/popular-recent-suggestions/).

popularSuggestionsConfig

Specify additional options for fetching popular suggestions. It can accept the following keys:

• size: number Maximum number of popular suggestions to return. Defaults to 5.
• minCount: number Return only popular suggestions that have been searched at least minCount times. There is no default minimum count-based restriction.
• minChars: number Return only popular suggestions that have minimum characters, as set in this property. There is no default minimum character-based restriction.
• showGlobal: Boolean Defaults to true. When set to false, returns popular suggestions only based on the current user's past searches.
• index: string Index(es) from which to return the popular suggestions from. Defaults to the entire cluster.
• sectionLabel: string custom html markup for section title.

    <SearchBox
        enablePopularSuggestions={true}
        popularSuggestionsConfig={{
            size: 5,
            minCount: 5,
            minChars: 3,
            showGlobal: false,
            index: "good-books-ds",  // further restrict the index to search on
            sectionLabel: '<h3>Popular suggestions</h3>'
        }}
    />

enableRecentSuggestions

Defaults to false. When set to true, recent searches are returned as suggestions as per the recent suggestions config (either defaults, or as set through recentSuggestionsConfig or via Recent Suggestions settings in the control plane).

Note: Please note that this feature only works when recordAnalytics is set to true in reactivesearchAPIConfig.

recentSuggestionsConfig

Specify additional options for fetching recent suggestions.

It can accept the following keys:

• size: number Maximum number of recent suggestions to return. Defaults to 5.
• minHits: number Return only recent searches that returned at least minHits results. There is no default minimum hits-based restriction.
• minChars: number Return only recent suggestions that have minimum characters, as set in this property. There is no default minimum character-based restriction.
• index: string Index(es) from which to return the recent suggestions from. Defaults to the entire cluster.
• sectionLabel: string custom html markup for section title.

    <SearchBox
        enableRecentSuggestions={true}
        recentSuggestionsConfig={{
            size: 5,
            minHits: 5,
            minChars: 3,
            index: "good-books-ds",  // further restrict the index to search on
            sectionLabel: '<h3>Index suggestions</h3>' 
        }}
    />

enableFeaturedSuggestions

Defaults to false. When set to true, featured suggestions are returned as suggestions as per the featured suggestions config (either defaults, or as set through featuredSuggestionsConfig or via Featured Suggestions settings in the control plane). Read more about it over here.

Featured suggestions allow creating autocomplete experiences with user-defined suggestions. They're specified using the Featured Suggestions API, introduced in 8.1.0. This is a beta API and subject to change.

searchboxId

When featured suggestions are enabled, set the value of the searchboxId to use for fetching them. This is configurable via ReactiveSearch dashboard and the following API endpoint.

featuredSuggestionsConfig

Specify additional options for fetching featured suggestions.

It can accept the following keys:

• maxSuggestionsPerSection: number maximum number of featured suggestions fetched per section.
• sectionsOrder: Array<String> accepts an array of section id(s). The order in which section id(s) are defined in the array describes the order in which the sections appear in the UI.

    <SearchBox
        enableFeaturedSuggestions={true}
        searchboxId="document-search"
        featuredSuggestionsConfig={{
            maxSuggestionsPerSection: 10,    
            sectionsOrder: ['document', 'pages', 'help'], 
        }}
    />

enablePredictiveSuggestions

Defaults to false. When set to true, it predicts the next relevant words from a field's value based on the search query typed by the user. When set to false (default), the matching document field's value would be displayed.

downShiftProps

allow passing props directly to the underlying Downshift component. You can read more about Downshift props here.

fieldWeights [deprecated]

set the search weight for the database fields, useful when dataField is an Array of more than one field. This prop accepts an array of numbers. A higher number implies a higher relevance weight for the corresponding field in the search results.

Note: The fieldWeights property has been marked as deprecated in v3.21.0 of ReactiveSearch and v7.47.0 of Appbase and would be removed in the next major release. We recommend you to use the dataField property to define the weights.

placeholder

set placeholder text to be shown in the component's input field. Defaults to "Search".

type

set the searchbox input field type attribute.

showIcon

whether to display a search or custom icon in the input box. Defaults to true.

iconPosition

sets the position of the search icon. Can be set to either left or right. Defaults to right.

icon

set a custom search icon instead of the default 🔍 . Takes precedence over iconURL prop.

iconURL

Customize search icon by providing a URL.

showClear

show a clear text X icon. Defaults to false.

clearIcon

allows setting a custom icon for clearing text instead of the default cross.

autosuggest

set whether the autosuggest functionality should be enabled or disabled. Defaults to true.

enableAI

enables the ability to ask questions with SearchBox and display AI generated answers from within SearchBox component itself. Defaults to false.

AIConfig

Specify additional options for configuring the LLM context + prompt for AI answer.

Accepts the following properties:

• systemPrompt String [optional] The system prompt to send as the first message to ChatGPT. Defaults to You are a helpful assistant.
• docTemplate String [optional] Template to use for building the message sent to ChatGPT for every hit of the response. The docTemplate string supports dynamic values using the special syntax ${}. These values are resolved while the ChatGPT request body is built. It supports keys that are present in the _source field in the response hits. As an example, source.title will resolve to _source.title. If values are not found, defaults to an empty string.
• queryTemplate String [optional] Template to use for building the message that is sent to ChatGPT as the final question. Defaults to Can you tell me about ${value} where value is the query.value. The querytemplate string supports a dynamic value of value which is the query.value of the query.
• topDocsForContext number [optional] Number of docs to use to build the context. Defaults to 3. This has an upper limit as the total number of hits returned.
• maxTokens number [optional] The maximum tokens that can be used for the output. Deafults to being dynamically calculated. Accepts a value between [1, 8000].
• temperatue number [optional] A control for randomness, a lower value implies a more deterministic output. Defaults to 1, valid values are between [0, 2].

AIUIConfig

Specify additional options for configruing AI screen.

Accepts the following properties:

• showFeedback Boolean [optional] Toggles displaying the feedback UI component to record AI session's feedback. Defaults to true.

  Use in conjunction with reactivesearchAPIConfig.recordAnalytics set to true in ReactiveBase.

• loaderMessage String | JSX [optional] Loading message to show when the AI Answer response is loading. The default value is: Computing an answer from the top documents...
• showSourceDocuments Boolean [optional] Whether to show the documents from which the AIAnswer is generated or not. Defaults to true.
• sourceDocumentLabel String [optional] Set the label using the string literal syntax: e.g. ${source.field} will set the label to the field’s resolved value, you can also combine more than one field value to display the label. Defaults to _id.
• onSourceClick Function [optional] callback to handle side-effects when a source button is clicked. Accepts a sourceObj param associated with the source button clicked.
• askButton Boolean [optional] When set to true, the AI answer action and the corresponding display of AIAnswer would be triggered when user presses the Ask button. Defaults to false. You can provide styles with ask-button key for the innerClass prop.
• renderAskButton number [optional] renders a custom jsx markup for the enter button. Use in conjunction with askButton prop set to true.
  Copy

  <SearchBox
      id="search-component"
      AIUIConfig={{
          askButton: true,
          renderAskButton: function (clickHandler){
              return (
                  <div
                      style={{
                          height: '100%',
                          display: 'flex',
                          alignItems: 'stretch',
                      }}
                  >
                      <button style={{ border: '1px solid #c3c3c3' }} onClick={clickHandler}>
                          🔍 Ask!
                      </button>
                  </div>
          )}
      }}
      enterButton
  />

strictSelection

defaults to false. When set to true the component will only set its value and fire the query if the value was selected from the suggestion. Otherwise the value will be cleared on selection. This is only relevant with autosuggest.

debounce

set the milliseconds to wait before executing the query. Defaults to 0, i.e. no debounce.

highlight

whether highlighting should be enabled in the returned results.

highlightField

when highlighting is enabled, this prop allows specifying the fields which should be returned with the matching highlights. When not specified, it defaults to applying highlights on the field(s) specified in the dataField prop.

customHighlight

a function which returns the custom highlight settings. It receives the props and expects you to return an object with the highlight key. Check out the technews demo where the SearchBox component uses a customHighlight as given below,

    <SearchBox
        componentId="BookSensor"
        dataField={[{field: "name", weight:3 }, {field: "name.search", weight:1 }]}
        highlight
        customHighlight={props => ({
        highlight: {
                pre_tags: ['<mark>'],
                post_tags: ['</mark>'],
                fields: {
                    text: {},
                    title: {},
                },
                number_of_fragments: 0,
            },
        })}
    />

queryFormat

Sets the query format, can be or or and. Defaults to or.

• or returns all the results matching any of the search query text's parameters. For example, searching for "bat man" with or will return all the results matching either "bat" or "man".
• On the other hand with and, only results matching both "bat" and "man" will be returned. It returns the results matching all of the search query text's parameters.

fuzziness

Sets a maximum edit distance on the search parameters, can be 0, 1, 2 or "AUTO". Useful for showing the correct results for an incorrect search parameter by taking the fuzziness into account. For example, with a substitution of one character, fox can become box. Read more about it in the elastic search docs.

Note:

This prop doesn't work when the value of queryFormat prop is set to and.

showFilter

show as filter when a value is selected in a global selected filters view. Defaults to true.

showDistinctSuggestions

Show 1 suggestion per document. If set to false multiple suggestions may show up for the same document as searched value might appear in multiple fields of the same document, this is true only if you have configured multiple fields in dataField prop. Defaults to true.

Example if you have showDistinctSuggestions is set to false and have following configurations

	// Your document:
	{
		"name": "Warn",
		"address": "Washington"
	}

	// Component:
	<SearchBox dataField={['name', 'address']} />

	// Search Query:
	"wa"

Then there will be 2 suggestions from the same document as we have the search term present in both the fields specified in dataField.

	Warn
	Washington

Note: Check the above concept in action over here.

showVoiceSearch

show a voice icon in the searchbox to enable users to set voice input. Defaults to false.

searchOperators

Defaults to false. If set to true than you can use special characters in the search query to enable an advanced search behavior.
Read more about it here.

queryString

Defaults to false. If set to true than it allows you to create a complex search that includes wildcard characters, searches across multiple fields, and more. Read more about it here.

filterLabel

An optional label to display for the component in the global selected filters view. This is only applicable if showFilter is enabled. Default value used here is componentId.

URLParams

enable creating a URL query string param based on the search query text value. This is useful for sharing URLs with the component state. Defaults to false.

excludeFields

fields to be excluded in the suggestion's query when autoSuggest is true.

includeFields

fields to be included in the suggestion's query when autoSuggest is true.

render

You can render suggestions in a custom layout by using the render prop.

It accepts an object with these properties:

• loading: boolean indicates that the query is still in progress.
• error: object An object containing the error info.
• data: array An array of suggestions obtained from cobtained as a result of suggestion type query.
• rawData object An object of raw response as-is from elasticsearch query.
• resultStats: object An object with the following properties which can be helpful to render custom stats:
  • numberOfResults: number Total number of results found
  • time: number Time taken to find total results (in ms)
  • hidden: number Total number of hidden results found
  • promoted: number Total number of promoted results found
• value: string current search input value i.e the search query being used to obtain suggestions.
• downshiftProps: object provides all the control props from downshift which can be used to bind list items with click/mouse events. Read more about it here.
• AIData: Object A wrapper object to provide access to AI screen properties. Use in conjunction with enableAI set to true. It contains the following keys:
  • question: String The current asked question.
  • answer: String Answer returned by the AI.
  • documentIds: Array<String> The documents' ids used for curating the AI answer.
  • isAILoading: Boolean Loading status for the AI response.
  • sources: Array<Object> The list of document objects corresponding to the documentIds, used for curating the AI answer.
  • showAIScreen: Boolean Boolean value to indicate when to show the AI screen.
  • AIError: Object Error returned while fetching the AI response.

    <SearchBox
        render={({ 
            loading, 
            error, 
            data, 
            value, 
            downshiftProps: { isOpen, getItemProps },
            AIData: {
            	question,
            	answer,
            	documentIds,
            	isAILoading,
            	sources,
                showAIScreen,
			    AIError
            }
            }) => {
                if (loading) {
                    return <div>Fetching Suggestions.</div>;
                }
                if (error) {
                    return <div>Something went wrong! Error details {JSON.stringify(error)}</div>;
                }
                return isOpen && Boolean(value.length) ? (
                    <div>
                        {data.map((suggestion, index) => (
                            <div key={suggestion.value} {...getItemProps({ item: suggestion })}>
                                {suggestion.value}
                            </div>
                        ))}
                        {Boolean(value.length) && (
                            <div {...getItemProps({ item: { label: value, value: value } })}>
                                Show all results for "{value}"
                            </div>
                        )}
                    </div>
                ) : null;
        }}
    />

Or you can also use render function as children

    <SearchBox>
        {
            ({
                loading,
                error,
                data,
                rawData,
                value,
                downshiftProps
            }) => (
                // return UI to be rendered
            )
        }
    </SearchBox>

renderError

can be used to render an error message in case of any error.

    renderError={(error) => (
            <div>
                Something went wrong!<br/>Error details<br/>{error}
            </div>
        )
    }

renderNoSuggestion

can be used to render a message when there is no suggestions found.

    renderNoSuggestion={() => (
            <div>
                No suggestions found
            </div>
        )
    }

getMicInstance

You can pass a callback function to get the instance of SpeechRecognition object, which can be used to override the default configurations.

renderMic

can we used to render the custom mic option.
It accepts an object with the following properties:

• handleClick: function needs to be called when the mic option is clicked.
• status: string is a constant which can have one of these values:
  INACTIVE - mic is in inactive state i.e not listening
  STOPPED - mic has been stopped by the user
  ACTIVE - mic is listening
  DENIED - permission is not allowed
  
  

    renderMic = {({ handleClick, status }) => {
        switch(status) {
            case 'ACTIVE':
                return <img src="/active_mic.png" onClick={handleClick} />
            case 'DENIED':
            case 'STOPPED':
                return <img src="/mute_mic.png" onClick={handleClick} />
            default:
                return <img src="/inactive_mic.png" onClick={handleClick} />
        }
    }}

onChange

is a callback function which accepts component's current value as a parameter. It is called when you are using the value prop and the component's value changes. This prop is used to implement the controlled component behavior.

    <SearchBox
        value={this.state.value}
        onChange={(value, triggerQuery, event) => {
            this.setState(
                {
                    value,
                },
                () => triggerQuery(),
            );
        }}
    />

Note:

If you're using the controlled behavior than it's your responsibility to call the triggerQuery method to update the query i.e execute the search query and update the query results in connected components by react prop. It is not mandatory to call the triggerQuery in onChange you can also call it in other input handlers like onBlur or onKeyPress. The triggerQuery method accepts an object with isOpen property (default to false) that can be used to control the opening state of the suggestion dropdown.

onData

You can pass a callback function to listen for the changes in suggestions. The function receives data, rawData, aggregationData, loading and error as a single parameter object.

    <SearchBox
        componentId="BookSensor"
        // ... other props ...
        onData = {({
            data,
            rawData,
            aggregationData,
            loading,
            error
        }) =>{
                // do something with the updated properties
        }}
    />

onError

You can pass a callback function that gets triggered in case of an error and provides the error object which can be used for debugging or giving feedback to the user if needed.

recentSearchesIcon

You can use a custom icon in place of the default icon for the recent search items that are shown when enableRecentSearches prop is set to true. You can also provide styles using the recent-search-icon key in the innerClass prop.

    <SearchBox
        // ... other props
        enableRecentSuggestions
        innerClass={{
            'recent-search-icon': '...',
        }}
        recentSearchesIcon={<RecentIcon />}
    />

popularSearchesIcon

You can use a custom icon in place of the default icon for the popular searches that are shown when enablePopularSuggestions prop is set to true. You can also provide styles using the popular-search-icon key in the innerClass prop.

    <SearchBox
        // ... other props
        enablePopularSuggestions
        innerClass={{
            'popular-search-icon': '...'
        }}
        popularSearchesIcon={<PopularIcon />}
    />

distinctField

This prop returns only the distinct value documents for the specified field. It is equivalent to the DISTINCT clause in SQL. It internally uses the collapse feature of Elasticsearch. You can read more about it over here.

distinctFieldConfig

This prop allows specifying additional options to the distinctField prop. Using the allowed DSL, one can specify how to return K distinct values (default value of K=1), sort them by a specific order, or return a second level of distinct values. distinctFieldConfig object corresponds to the inner_hits key's DSL. You can read more about it over here.

    <SearchBox
        //....
        distinctField="authors.keyword"
        distinctFieldConfig={{
            inner_hits: {
                name: 'most_recent',
                size: 5,
                sort: [{ timestamp: 'asc' }],
            },
            max_concurrent_group_searches: 4,
        }}
    />

renderItem

You can render each suggestion in a custom layout by using the renderItem prop.

    <SearchBox
        {...props}
        componentId="BookSensor"
        renderItem={
            (suggestion)=>{
                // custom render every suggestion item in dropdown
                return <span>{suggestion.label}</span> 
            }
        }
    />

renderAIAnswer

You can render the AI screen content in a custom layout by using the renderAIAnswer prop.

The callback accepts an object with following keys:

• question: String The current asked question.
• answer: String Answer returned by the AI.
• documentIds: Array<String> The documents' ids used for curating the AI answer.
• loading: Boolean Loading status for the AI response.
• sources: Array<Object> The list of document objects corresponding to the documentIds, used for curating the AI answer.

    <SearchBox
        {...props}
        componentId="BookSensor"
        renderAIAnswer={
            ({
            	question,
            	answer,
            	documentIds,
            	loading,
            	sources,
            })=>{
                // custom render AI screen
                return <span>...</span> 
            }
        }
    />

applyStopwords

When set to true, it would not predict a suggestion which starts or ends with a stopword. You can find the list of stopwords used by Appbase at here.

customStopwords

It allows you to define a list of custom stopwords. You can also set it through Index settings in the control plane.

categoryField

Data field whose values are used to provide category specific suggestions.

Demo

Styles

SearchBox component supports an innerClass prop to provide styles to the sub-components of SearchBox. These are the supported keys:

• title
• input
• list
• recent-search-icon
• popular-search-icon
• featured-search-icon
• section-label
• active-suggestion-item
• suggestion-item
• enter-button
• selected-tag
• ask-button
• ai-source-tag
• ai-feedback

Read more about it here.

Extending

SearchBox component can be extended to:

1. customize the look and feel with className, style,
2. update the underlying DB query with customQuery,
3. connect with external interfaces using beforeValueChange, onValueChange, onValueSelected and onQueryChange,
4. specify how search suggestions should be filtered using react prop,

• it's also possible to take control of rendering individual suggestions with renderItem prop or the entire suggestions rendering using the render prop. Check the custom suggestions recipe for more info.

6. add the following synthetic events to the underlying input element:

   • onBlur
   • onFocus
   • onKeyPress
   • onKeyDown
   • onKeyUp
   • autoFocus

   Note:

   1. All these events accepts the triggerQuery as a second parameter which can be used to trigger the SearchBox query with the current selected value (useful to customize the search query execution).
   2. There is a known issue with onKeyPress when autosuggest is set to true. It is recommended to use onKeyDown for the consistency.

   Copy

   <SearchBox
   //...
   className="custom-class"
   style={{"paddingBottom": "10px"}}
   customQuery={
       function(value, props) {
       return {
           query: {
               match: {
                   data_field: "this is a test"
               }
           }
       }
       }
   }
   beforeValueChange={
       function(value) {
       // called before the value is set
       // returns a promise
       return new Promise((resolve, reject) => {
           // update state or component props
           resolve()
           // or reject()
       })
       }
   }
   onValueChange={
       function(value) {
       console.log("current value: ", value)
       // set the state
       // use the value with other js code
       }
   }
   onValueSelected={
       function(value, cause, source) {
       console.log("current value: ", value)
       }
   }
   onQueryChange={
       function(prevQuery, nextQuery) {
       // use the query with other js code
       console.log('prevQuery', prevQuery);
       console.log('nextQuery', nextQuery);
       }
   }
   // specify how and which suggestions are filtered using `react` prop.
   react={
       "and": ["pricingFilter", "dateFilter"],
       "or": ["searchFilter"]
   }
   />

className

CSS class to be injected on the component container.

style

CSS styles to be applied to the SearchBox component.

customQuery

takes value and props as parameters and returns the data query to be applied to the component, as defined in Elasticsearch Query DSL. Note: customQuery is called on value changes in the SearchBox component as long as the component is a part of react dependency of at least one other component.

defaultQuery

is a callback function that takes value and props as parameters and returns the data query to be applied to the source component, as defined in Elasticsearch Query DSL, which doesn't get leaked to other components. In simple words, defaultQuery prop allows you to modify the query to render the suggestions when autoSuggest is enabled. Read more about it here.

beforeValueChange

is a callback function which accepts component's future value as a parameter and returns a promise. It is called everytime before a component's value changes. The promise, if and when resolved, triggers the execution of the component's query and if rejected, kills the query execution. This method can act as a gatekeeper for query execution, since it only executes the query after the provided promise has been resolved.

Note:

If you're using Reactivesearch version >= 3.3.7, beforeValueChange can also be defined as a synchronous function. value is updated by default, unless you throw an Error to reject the update. For example:

beforeValueChange = value => {
    // The update is accepted by default
    if (value && value.toLowerCase().contains('Social')) {
        // To reject the update, throw an error
        throw Error('Search value should not contain social.');
    }
};

onValueChange

is a callback function which accepts component's current value as a parameter. It is called everytime the component's value changes. This prop is handy in cases where you want to generate a side-effect on value selection. For example: You want to show a pop-up modal with the valid discount coupon code when a user searches for a product in a SearchBox.

onValueSelected

is called with the value selected via user interaction. It works only with autosuggest and is called whenever a suggestion is selected or a search is performed by pressing enter key. It also passes the cause of action and the source object if the cause of action was 'SUGGESTION_SELECT'. The possible causes are:

• 'SUGGESTION_SELECT'
• 'ENTER_PRESS'
• 'CLEAR_VALUE'
• 'SEARCH_ICON_CLICK'

onQueryChange

is a callback function which accepts component's prevQuery and nextQuery as parameters. It is called everytime the component's query changes. This prop is handy in cases where you want to generate a side-effect whenever the component's query would change.

react

specify dependent components to reactively update SearchBox's suggestions.

• key String one of and, or, not defines the combining clause.
  • and clause implies that the results will be filtered by matches from all of the associated component states.
  • or clause implies that the results will be filtered by matches from at least one of the associated component states.
  • not clause implies that the results will be filtered by an inverse match of the associated component states.
• value String or Array or Object
  • String is used for specifying a single component by its componentId.
  • Array is used for specifying multiple components by their componentId.
  • Object is used for nesting other key clauses.

index

The index prop can be used to explicitly specify an index to query against for this component. It is suitable for use-cases where you want to fetch results from more than one index in a single ReactiveSearch API request. The default value for the index is set to the app prop defined in the ReactiveBase component.

focusShortcuts

A list of keyboard shortcuts that focus the search box. Accepts key names and key codes. Compatible with key combinations separated using '+'. Defaults to ['/'].

For example, if you want to focus the searchbox when pressing Shift and A together then you can pass ["SHIFT + A"]. The string is case-insensitive and space in-between is optional. You can also pass several shortcuts ["SHIFT+A", "SHIFT+B"].

showFocusShortcutsIcon

Whether to display the information of focus shortcut inside the searchbox. Defaults to true.

showSuggestionsFooter

Whether to display a footer with additional information at the bottom of suggestions. Defaults to true and shows information regarding navigation keys for the searchbox.

renderSuggestionsFooter

customize the footer displayed at the bottom of the suggestions using this render function.

<SearchBox
    {...otherProps}
    renderSuggestionsFooter={()=>(<div>Custom suggestion footer!</div>)}
>

autoFocus

When set to true, search box is auto-focused on page load. Defaults to false.

addonBefore

The HTML markup displayed before (on the left side of) the searchbox input field. Users can use it to render additional actions/ markup, eg: a custom search icon hiding the default.

    <SearchBox
        showIcon={false}
        addonBefore={
        <img
            src="https://img.icons8.com/cute-clipart/64/000000/search.png"
            height="30px"
        />
        }
        id="search-component"
        // ...other props
    />

addonAfter

The HTML markup displayed after (on the right side of) the searchbox input field. Users can use it to render additional actions/ markup, eg: a custom search icon hiding the default.

    <SearchBox
        showIcon={false}
        addonAfter={
        <img
            src="https://img.icons8.com/cute-clipart/64/000000/search.png"
            height="30px"
        />
        }
        id="search-component"
        // ... other props
    />

expandSuggestionsContainer

When set to false the width of suggestions dropdown container is limited to the width of searchbox input field. Defaults to true.

    <SearchBox
        expandSuggestionsContainer={false}
        addonBefore={
            <img  />
        }
        addonAfter={
            <img  />
        }
        id="search-component"
        // ... other props
    />

isOpen

When set to true the dropdown is displayed on the initial render. Defaults to false.

enterButton

When set to true, the results would only be updated on press of the button. Defaults to false. You can also provide styles using the enter-button key in the innerClass prop.

    <SearchBox            
        id="search-component"
        enterButton={true}
    />

renderEnterButton

renders a custom jsx markup for the enter button. Use in conjunction with enterButton prop set to true.

    <SearchBox
        id="search-component"
        enterButton
        renderEnterButton={clickHandler => (
            <div
                style={{
                    height: '100%',
                    display: 'flex',
                    alignItems: 'stretch',
                }}
            >
                <button style={{ border: '1px solid #c3c3c3' }} onClick={clickHandler}>
                    🔍 Search
                </button>
            </div>
        )}
    />

renderSelectedTags

to custom render tags when mode is set to tag.

Function param accepts an object with the following properties:

• values: Array<String>

array of selected values.

• handleClear: Function - (string) => void

function to clear a tag value. It accepts the tag value(String) as a parameter.

• handleClearAll: Function - () => void

function to clear all selected values.

    <SearchBox
        id="search-component"
        enterButton
        renderSelectedTags={({ 
            values = [], 
            handleClear, 
            handleClearAll }) => {
                // return custom rendered tags 
            }
        }
    />

Examples

SearchBox with default props

SearchBox with default props

Customize suggestions using innerClass

	<SearchBox
	    title="SearchBox"
	    dataField={['original_title', 'original_title.search']}
	    componentId="BookSensor"
	    innerClass={{
            'section-label': 'section-label',
	    	'active-suggestion-item': 'active-test-suggestion',
	    	'suggestion-item': 'test-suggestion',
	    }}
	    enableFeaturedSuggestions
    />

Inside your css file ->

.section-label {
	font-weight: 800;
	font-size: 14px;
	text-decoration: overline;
}

.active-test-suggestion {
	border-left: 6px solid #ffa000;
	background-color: #6629ea !important;
	border-radius: 4px;
	margin: 3px;
}

.test-suggestion {
	background-color: #f0e1e1 !important;
	border-radius: 4px;
	margin: 3px;
}

SearchBox with Pill-based UI

Combining Instant Search with Pill-based Suggestions can help users easily navigate through large datasets by providing a structured and intuitive way to explore data. The Pill-based Suggestions allow users to filter results based on specific criteria, such as category, location, date, etc. This can be particularly useful when dealing with complex data structures, where searching through large amounts of data can be time-consuming and overwhelming.

SearchBox with AI Answer

Combining Search with the power of AI makes for a high precision and high recall answer. The example shows how SearchBox component can be used to display an AI Answer.