Image to be displayed

React SearchBox offers a lightweight (~30KB: Minified + Gzipped) and performance focused searchbox UI component to query and display results from your Elasticsearch app (aka index) using declarative props. It is an alternative to using the DataSearch component from ReactiveSearch.

We recommend using React Searchbox over DataSearch or CategorySearch when you only need to integrate a searchbox UI component into your app. If you are planning to user other UI filters or result components, it is ideal to use the ReactiveSearch library instead of this standalone component.

Example uses of searchbox UI:

  • Searching a rental listing by its name or description fields.
  • Searching across e-commerce products.

Usage

Basic Usage

<SearchBox
    app="good-books-ds"
    credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
    dataField={['original_title', 'original_title.search']}
/>

Usage With All Props

<SearchBox
    app="good-books-ds"
    appbaseConfig={{
        recordAnalytics: true,
        enableQueryRules: true,
        userId: 'jon@appbase.io',
        customEvents: {
           platform: "ios",
           device: "iphoneX"
        }
    }}
    credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
    dataField={[
        { field: 'original_title', weight: 1 },
        { field: 'original_title.search', weight: 3 },
    ]}
    title="Search"
    defaultValue="Songwriting"
    placeholder="Search for books"
    autosuggest={true}
    defaultSuggestions={[
        { label: 'Songwriting', value: 'Songwriting' },
        { label: 'Musicians', value: 'Musicians' },
    ]}
    size={10}
    highlight={true}
    highlightField="group_city"
    queryFormat="or"
    fuzziness="AUTO"
    showClear
    showVoiceSearch
/>

Props

  • app string [required] refers to an index if you’re using your own Elasticsearch cluster. If you're using an appbase.io hosted app, then the app name can be used.

    Note: Multiple indexes can be connected to by specifying comma separated index names.

  • url string [required] URL for the Elasticsearch cluster. Defaults to https://scalr.api.appbase.io

  • credentials string [optional] Basic auth credentials for authentication purposes. It should be a string of the format username:password. If you are using an appbase.io app, you will find credentials under your API credentials page. If you are not using an appbase.io app, credentials may not be necessary - although having an open access to your Elasticsearch cluster is not recommended.

  • enableAppbase boolean [optional] enableAppbase is false by default. You can set this to true when you're using appbase.io alongside Elasticsearch. It enables the following features:

    • Recording of analytics events - search and clicks. Read more.
    • Query generation happens on server side - protecting against security concerns around query injection.
    • Apply query rules and functions for search queries. Read more.
    • Apply additional security controls to requests: authenticate via RBAC (via JWTs) or Basic Auth, ACL based access control, IP based rate limits, IP/HTTP Referers whitelisting, fields filtering. Read more.
  • enableQuerySuggestions bool [optional] Defaults to false. When enabled, it can be useful to curate search suggestions based on actual search queries that your users are making. Read more about it over here.

    Note:

    Query Suggestions only work when enableAppbase prop is true.

  • dataField string | Array<string | DataField> [optional*] database field(s) to be queried against. Accepts a String or an Array of either String or DataField type. The latter is useful for searching across multiple fields with field weights.
    Think of field weights as a way to apply weighted search. To use field weights, you can define the dataField prop as an array of objects of DataField type.
    The DataField type has the following shape:

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

    Note: This prop is optional only when enableAppbase prop is set to true.

  • showDistinctSuggestions Boolean [optional] 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
    
  • aggregationField string [optional] 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 use aggregationData using onAggregationData callback.

    <SearchBox
        app="good-book-ds-latest"
        credentials="IPM14ICqp:8e573e86-8802-4a27-a7a1-4c7d0c62c186"
        dataField="original_title"
        aggregationField="original_title.keyword"
        onAggregationData={(next, prev) => <>}
    />
    

    See impact of aggregationField with these example for React.

  • appbaseConfig Object [optional] allows you to customize the analytics experience when appbase.io is used as a backend. It accepts an object which has the following properties:

    • recordAnalytics Boolean allows recording search analytics (and click analytics) when set to true and appbase.io is used as a backend. Defaults to false.
    • enableQueryRules Boolean If false, then appbase.io will not apply the query rules on the search requests. Defaults to true.
    • userId String It allows you to define the user id to be used to record the appbase.io analytics. Defaults to the client's IP address.
    • customEvents Object It allows you to set the custom events which can be used to build your own analytics on top of appbase.io analytics. Further, these events can be used to filter the analytics stats from the appbase.io dashboard.
  • nestedField String [optional] 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 String or JSX [optional] set the title of the component to be shown in the UI.

  • size Number [optional] number of suggestions and results to show. Defaults to 10.

  • defaultValue string [optional] set the initial search query text on mount.

  • value string [optional] 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.

  • downShiftProps Object [optional] allow passing props directly to the underlying Downshift component. You can read more about Downshift props here.

  • placeholder String [optional] set placeholder text to be shown in the component's input field. Defaults to "Search".

  • showIcon Boolean [optional] whether to display a search or custom icon in the input box. Defaults to true.

  • iconPosition String [optional] sets the position of the search icon. Can be set to either left or right. Defaults to right.

  • icon JSX [optional] set a custom search icon instead of the default icon 🔍

  • showClear Boolean [optional] show a clear text X icon. Defaults to false.

  • clearIcon JSX [optional] set a custom icon for clearing text instead of the default cross.

  • autosuggest Boolean [optional] set whether the autosuggest functionality should be enabled or disabled. Defaults to true.

  • strictSelection Boolean [optional] 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.

  • defaultSuggestions Array [optional] preset search suggestions to be shown on focus when the SearchBox does not have any search query text set. Accepts an array of objects each having a label and value property. The label can contain either String or an HTML element.

  • debounce Number [optional] set the milliseconds to wait before executing the query. Defaults to 0, i.e. no debounce.

  • highlight Boolean [optional] whether highlighting should be enabled in the returned results.

  • highlightField String or Array [optional] 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.

  • queryFormat String [optional] 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 String or Number [optional] 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.

  • showVoiceSearch Boolean [optional] show a voice icon in the searchbox to enable users to set voice input. Defaults to false.

  • searchOperators Boolean [optional] Defaults to false. If set to true, ou can use special characters in the search query to enable an advanced search behavior.
    Read more about it here.

  • URLParams Boolean [optional] 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.

  • render Function [optional] 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 parsed suggestions obtained from the applied query.
    • querySuggestions: array An array of query suggestions obtained based on search value.
    • rawData: object An object of raw response as-is from elasticsearch query.
    • promotedData: array An array of promoted results obtained from the applied query. Read More
    • customData: Object An object of custom data obtained from the reactivesearch-v3 API. Read More.
    • 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.
<SearchBox
    render={({ loading, error, data, value, downshiftProps: { isOpen, getItemProps } }) => {
        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.slice(0, 5).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>
  • renderQuerySuggestions String or JSX or Function [optional] You can render query suggestions in a custom layout by using the renderQuerySuggestions 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 query suggestions obtained based on search value.
    • 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.
    <SearchBox
        dataField={['original_title', 'original_title.search']}
        enableQuerySuggestions
        renderQuerySuggestions={({
            value,
            data: suggestions,
            downshiftProps: { isOpen, getItemProps, highlightedIndex },
        }) =>
            isOpen &&
            Boolean(value.length) && (
                <div>
                    {(suggestions || []).map((suggestion, index) => (
                        <div
                            style={{
                                padding: 10,
                                background:
                                    index === highlightedIndex
                                        ? '#eee'
                                        : 'transparent',
                                color: 'green',
                            }}
                            key={suggestion.value}
                            {...getItemProps({ item: suggestion })}
                        >
                            {suggestion.value}
                        </div>
                    ))}
                </div>
            )
        }
    />
    
  • renderError String or JSX or Function [optional] 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 String or JSX or Function [optional] can be used to render a message when there are no suggestions found.

    renderNoSuggestion={() => (
            <div>
                No suggestions found
            </div>
        )
    }
    
  • getMicInstance Function [optional] You can pass a callback function to get the instance of SpeechRecognition object, which can be used to override the default configurations.

  • renderMic String or JSX or Function [optional] can be 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 = {({ onClick, status }) => {
                    switch(status) {
                        case 'ACTIVE':
                            return <img src="/active_mic.png" onClick={onClick} />
                        case 'DENIED':
                        case 'STOPPED':
                            return <img src="/mute_mic.png" onClick={onClick} />
                        default:
                            return <img src="/inactive_mic.png" onClick={onClick} />
                    }
        }}
    
  • onChange function [optional] 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 then 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.

  • onSuggestions Function [optional] You can pass a callback function to listen for the changes in suggestions. The function receives suggestions list.
  • onError Function [optional] 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.

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

Read more about it here.

Extending

SearchBox component can be extended to:

  1. customize the look and feel with className, style,

  2. connect with external interfaces using beforeValueChange, onValueChange, onValueSelected and onQueryChange,

  3. 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.
<SearchBox
  ...
  className="custom-class"
  style={{"paddingBottom": "10px"}}
  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);
    }
  }

/>
  • className String CSS class to be injected on the component container.
  • style Object CSS styles to be applied to the SearchBox component.
  • defaultQuery Function 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.
    Read more about it here.
  • beforeValueChange Function is a callback function which accepts component's future value as a parameter and returns a promise. It is called every-time 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.
  • onValueChange Function is a callback function which accepts component's current value as a parameter. It is called every-time 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 Function 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 Function 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.