ContributorsLast modified on: Feb 8, 2017
siddharthlatestmetagroverweb-flow

DataSearch

Image to be displayed

A DataSearch sensor component creates a searchbox UI widget with an autocomplete functionality. It is used for applying full-text search across one or more fields.

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.

Usage

<DataSearch
  componentId="SearchSensor"
  appbaseField={["group_venue", "group_city"]}
  title="Search"
  placeholder="Search for cities or venues"
  autocomplete={true}
/>

Props

  • componentId String
    unique id of the sensor, can be referenced in an actuator’s actuate prop.
  • appbaseField String or Array
    data field(s) on which the search query will be aplied to. If you want to search across multiple fields, pass them as an Array.
  • title String [optional]
    Sets the title of the component to be shown in the UI.
  • placeholder String [optional]
    Sets the placeholder text to be shown in the searhbox input field. Defaults to “Search…”.
  • autocomplete Boolean [optional]
    Sets whether the autocomplete functionality should be enabled or disabled. Defaults to true.

CSS Styles

All reactivebase components are rbc namespaced.

Annotated Image

<div class="rbc rbc-datasearch rbc-title-inactive rbc-placeholder-active rbc-autocomplete-active">
        <div class="Select Select--single is-searchable">
            ...
        </div>
</div>

<div class="rbc rbc-datasearch rbc-title-active rbc-placeholder-active rbc-autocomplete-inactive">
        <h4 class="rbc-title col s12 col-xs-12">DataSearch</h4>
        <div class="rbc-search-container col s12 col-xs-12">
            <input type="text" class="rbc-input" placeholder="Search Venue" value="">
            <span class="rbc-search-icon"></span>
        </div>
</div>
  • DataSearch component’s class name is rbc-datasearch.
  • Additionally, depending on the presence / absence of the placeholder prop, a rbc-placeholder-active or rbc-placeholder-inactive class is respectively applied.
  • Also depending on the presence / absence of the autocomplete prop, a rbc-autocomplete-active or rbc-autocomplete-inactive class is respectively applied.
  • the title element has a class name of rbc-title.
  • the search container has a class name of rbc-search-container.
  • the input element inside the search container has a class name of rbc-input.

Examples

  1. DataSearch with all the default props
  2. DataSearch with autocomplete turned off
  3. Playground (with all knob actions)