Search

Search input with specific styles.

Import Syntax

xxxxxxxxxx
 
import Search from 'calcite-react/Search';

Basic Usage

 
() => {
  const items = [...statesJson.states]
​
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
​
      this.state = {
        inputValue: '',
        selectedItem: '',
      }
​
      this.searchChanged = this.searchChanged.bind(this)
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    searchChanged(e) {
      this.setState({
        selectedItem: e,
      })
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
        selectedItem: '',
      })
    }
​
    onUserAction(inputValue, selectedItemVal) {
      this.setState({
        inputValue: inputValue,
        selectedItem: selectedItemVal,
      })
    }
​
    render() {
      return (
        <Search
          inputValue={this.state.inputValue}
          selectedItem={this.state.selectedItem}
          items={items}
          onChange={this.searchChanged}
          onUserAction={this.onUserAction}
          onRequestClear={this.clearSearch}
        />
      )
    }
  }
​
  return <SearchStory />
}

Alternate Styles

minimal

appendToBody

fullWidth

 
() => {
  const items = [...statesJson.states]
​
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
​
      this.state = {
        inputValue: '',
        selectedItem: '',
      }
​
      this.searchChanged = this.searchChanged.bind(this)
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    searchChanged(e) {
      this.setState({
        selectedItem: e,
      })
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
        selectedItem: '',
      })
    }
​
    onUserAction(inputValue, selectedItemVal) {
      this.setState({
        inputValue: inputValue,
        selectedItem: selectedItemVal,
      })
    }
​
    render() {
      return (
        <React.Fragment>
          <GuideExample label="minimal">
            <Search
              inputValue={this.state.inputValue}
              selectedItem={this.state.selectedItem}
              items={items}
              minimal
              onChange={this.searchChanged}
              onUserAction={this.onUserAction}
              onRequestClear={this.clearSearch}
            />
          </GuideExample>
          <GuideExample label="appendToBody">
            <Search
              inputValue={this.state.inputValue}
              selectedItem={this.state.selectedItem}
              items={items}
              appendToBody
              onChange={this.searchChanged}
              onUserAction={this.onUserAction}
              onRequestClear={this.clearSearch}
            />
          </GuideExample>
          <GuideExample label="fullWidth">
            <Search
              inputValue={this.state.inputValue}
              selectedItem={this.state.selectedItem}
              items={items}
              fullWidth
              onChange={this.searchChanged}
              onUserAction={this.onUserAction}
              onRequestClear={this.clearSearch}
            />
          </GuideExample>
        </React.Fragment>
      )
    }
  }
​
  return <SearchStory />
}

Use Remote Data

remote

 
() => {
  class SearchStory extends React.Component {
    constructor() {
      this.state = {
        items: [],
        inputValue: '',
        selectedItem: '',
      }
​
      this.searchChanged = this.searchChanged.bind(this)
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    searchChanged(e) {
      this.setState({
        selectedItem: e,
      })
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
        selectedItem: '',
      })
    }
​
    onUserAction(inputValue, selectedItemVal) {
      this.setState({
        inputValue: inputValue,
        selectedItem: selectedItemVal,
      })
​
      if (!inputValue) {
        this.setState({ items: [] })
        return
      }
​
      if (inputValue === this.state.inputValue) {
        return
      }
​
      this.fetchStates(inputValue).then(states => {
        const items = states.map(state => {
          return {
            label: state.attributes.STATE_NAME,
            value: state.attributes.STATE_NAME,
          }
        })
​
        this.setState({ items })
      })
    }
​
    fetchStates(q) {
      return new Promise((resolve, response) => {
        const url = `https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_States_Generalized/FeatureServer/0/query?where=UPPER(STATE_NAME) LIKE UPPER('${q}%')&outFields=STATE_NAME&returnGeometry=false&orderByFields=STATE_NAME asc&f=json`
        fetch(window.encodeURI(url))
          .then(response => response.json())
          .then(json => resolve(json.features))
      })
    }
​
    render() {
      return (
        <GuideExample label="remote">
          <Search
            inputValue={this.state.inputValue}
            selectedItem={this.state.selectedItem}
            items={this.state.items}
            minimal
            onChange={this.searchChanged}
            onUserAction={this.onUserAction}
            onRequestClear={this.clearSearch}
            remote={true}
          />
        </GuideExample>
      )
    }
  }
​
  return <SearchStory />
}

Replace Search Icon

searchIcon={<FileMagnifyingGlassIcon size={16} />}

searchIcon={false}

 
<GuideExample label="searchIcon={<FileMagnifyingGlassIcon size={16} />}">
  <Search searchIcon={<FileMagnifyingGlassIcon size={16} />} />
</GuideExample>
<GuideExample label="searchIcon={false}">
  <Search searchIcon={false} />
</GuideExample>

Array of Objects

 
() => {
  const items = [...statesJson2.states]
​
  const dataSourceConfig = {
    label: 'name',
    value: 'abbrev',
  }
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
​
      this.state = {
        inputValue: '',
        selectedItem: '',
      }
​
      this.searchChanged = this.searchChanged.bind(this)
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    searchChanged(e) {
      this.setState({
        selectedItem: e,
      })
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
        selectedItem: '',
      })
    }
​
    onUserAction(inputValue, selectedItemVal) {
      this.setState({
        inputValue: inputValue,
        selectedItem: selectedItemVal,
      })
    }
​
    render() {
      return (
        <Search
          dataSourceConfig={dataSourceConfig}
          inputValue={this.state.inputValue}
          selectedItem={this.state.selectedItem}
          items={items}
          onChange={this.searchChanged}
          onUserAction={this.onUserAction}
          onRequestClear={this.clearSearch}
        />
      )
    }
  }
​
  return <SearchStory />
}

Child Items

 
() => {
  const items = [...statesJson2.states]
​
  const dataSourceConfig = {
    label: 'name',
    value: 'abbrev',
  }
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
​
      this.state = {
        inputValue: '',
        selectedItem: '',
      }
​
      this.searchChanged = this.searchChanged.bind(this)
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    searchChanged(e) {
      this.setState({
        selectedItem: e,
      })
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
        selectedItem: '',
      })
    }
​
    onUserAction(inputValue, selectedItemVal) {
      this.setState({
        inputValue: inputValue,
        selectedItem: selectedItemVal,
      })
    }
​
    render() {
      return (
        <Search
          dataSourceConfig={dataSourceConfig}
          inputValue={this.state.inputValue}
          selectedItem={this.state.selectedItem}
          onChange={this.searchChanged}
          onUserAction={this.onUserAction}
          onRequestClear={this.clearSearch}
        >
          {items.map(item => {
            return (
              <MenuItem key={item.abbrev} item={item}>
                {item.name}
              </MenuItem>
            )
          })}
        </Search>
      )
    }
  }
​
  return <SearchStory />
}

Custom Items

 
() => {
  const items = [...statesJson2.states]
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
​
      this.state = {
        inputValue: '',
        selectedItem: '',
      }
​
      this.searchChanged = this.searchChanged.bind(this)
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    searchChanged(e) {
      this.setState({
        selectedItem: e,
      })
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
        selectedItem: '',
      })
    }
​
    onUserAction(inputValue, selectedItemVal) {
      this.setState({
        inputValue: inputValue,
        selectedItem: selectedItemVal,
      })
    }
​
    render() {
      return (
        <Search
          inputValue={this.state.inputValue}
          selectedItem={this.state.selectedItem}
          onChange={this.searchChanged}
          onUserAction={this.onUserAction}
          onRequestClear={this.clearSearch}
        >
          {items.map(item => {
            return (
              <ListItem
                key={item.abbrev}
                value={item.abbrev}
                label={item.name}
                leftNode={<GlobeIcon size={32} />}
              >
                <ListItemTitle>{item.name}</ListItemTitle>
                <ListItemSubtitle>{item.abbrev}</ListItemSubtitle>
              </ListItem>
            )
          })}
        </Search>
      )
    }
  }
​
  return <SearchStory />
}

Dumb Input

uncontrolled

 
() => {
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        inputValue: '',
      }
​
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
      })
    }
​
    onUserAction(inputValue) {
      this.setState({
        inputValue: inputValue,
      })
    }
​
    render() {
      return (
        <React.Fragment>
          <GuideExample>
            <Search
              inputValue={this.state.inputValue}
              onUserAction={this.onUserAction}
              onRequestClear={this.clearSearch}
            />
          </GuideExample>
          <GuideExample label="uncontrolled">
            <Search />
          </GuideExample>
        </React.Fragment>
      )
    }
  }
​
  return <SearchStory />
}

Shortcut Character

 
() => {
  const items = [...statesJson.states]
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
​
      this.state = {
        inputValue: '',
        selectedItem: '',
        searchInput: null,
      }
​
      this.handleKeypress = this.handleKeypress.bind(this)
      this.setSearchInput = this.setSearchInput.bind(this)
      this.searchChanged = this.searchChanged.bind(this)
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    componentDidMount() {
      document.body.addEventListener('keypress', this.handleKeypress)
    }
​
    componentWillUnmount() {
      document.body.removeEventListener('keypress', this.handleKeypress)
    }
​
    handleKeypress(e) {
      if (
        e.key === '/' &&
        document.activeElement !== this.state.searchInput
      ) {
        // Stop the typed character from being inserted in the input
        e.preventDefault()
​
        // Focus the input
        this.state.searchInput.focus()
      }
    }
​
    setSearchInput(searchInput) {
      this.setState({
        searchInput,
      })
    }
​
    searchChanged(e) {
      this.setState({
        selectedItem: e,
      })
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
        selectedItem: '',
      })
    }
​
    onUserAction(inputValue, selectedItemVal) {
      this.setState({
        inputValue: inputValue,
        selectedItem: selectedItemVal,
      })
    }
​
    render() {
      return (
        <Search
          inputRef={this.setSearchInput}
          shortcutCharacter="/"
          inputValue={this.state.inputValue}
          selectedItem={this.state.selectedItem}
          items={items}
          onChange={this.searchChanged}
          onUserAction={this.onUserAction}
          onRequestClear={this.clearSearch}
        />
      )
    }
  }
​
  return <SearchStory />
}

Virtualized

 
() => {
  const items = [...statesJson.states]
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
​
      this.state = {
        inputValue: '',
        selectedItem: '',
      }
​
      this.searchChanged = this.searchChanged.bind(this)
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    searchChanged(e) {
      this.setState({
        selectedItem: e,
      })
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
        selectedItem: '',
      })
    }
​
    onUserAction(inputValue, selectedItemVal) {
      this.setState({
        inputValue: inputValue,
        selectedItem: selectedItemVal,
      })
    }
​
    render() {
      return (
        <Search
          virtualized
          virtualizedMenuWidth={250}
          inputValue={this.state.inputValue}
          selectedItem={this.state.selectedItem}
          items={items}
          onChange={this.searchChanged}
          onUserAction={this.onUserAction}
          onRequestClear={this.clearSearch}
        />
      )
    }
  }
​
  return <SearchStory />
}

Custom Styled Input

 
() => {
  class SearchStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        inputValue: '',
      }
​
      this.clearSearch = this.clearSearch.bind(this)
      this.onUserAction = this.onUserAction.bind(this)
    }
​
    clearSearch() {
      this.setState({
        inputValue: '',
      })
    }
​
    onUserAction(inputValue) {
      this.setState({
        inputValue: inputValue,
      })
    }
​
    render() {
      return (
        <StyledSearch
          minimal
          fullWidth
          searchIcon={
            <MagnifyingGlassIcon
              filled
              size={16}
              color={CalciteTheme.palette.lighterBlue}
            />
          }
          clearIcon={
            <XCircleIcon
              filled
              size={16}
              color={CalciteTheme.palette.white}
            />
          }
          inputValue={this.state.inputValue}
          onUserAction={this.onUserAction}
          onRequestClear={this.clearSearch}
        />
      )
    }
  }
​
  return <SearchStory />
}

Props

Property	Type	Required	Default	Description
placeholder	String	false	Search...	Text for the placeholder property on the input.
dataSourceConfig	Object	false	{ label: label, value: value }	An object used to map properties to the name and value of items (only applies if `items` is an array of objects).
placement	Enum	false	bottom-start	Placement of the popover in relation to the target.
shortcutTooltip	Node	false	Press / to search	Text used in the shortcut tooltip to describe what the shortcut is.
virtualizedRowHeight	Union	false	42	(virtualized only) Row height used to calculate how many rows to render in a virtualized menu.
searchIcon	Node	false	<MagnifyingGlassIcon filled size={16} />	SVG icon to be displayed inside the Search input
clearIcon	Node	false	<XCircleIcon filled size={16} color={CalciteTheme.palette.darkerGray} />	SVG icon to clear the value of the Search input
onUserAction	Func	false	() => {}	Function called when the input value is changed, items dropdown hides/shows, or when the user hovers over or clicks on an item.
onChange	Func	false	() => {}	Function called when an item is selected.
onRequestClear	Func	false	() => {}	Function called when the user clicks the clear button.
remote	Bool	false	false	Use a remote API for the data load. This will allow the application to see the exact return from the API with no filtering applied
items	Array	false	-	Array of items.
inputValue	String	false	-	Text in the input.
selectedItem	Any	false	-	The selected item.
minimal	Bool	false	-	Toggle minimal style on the input.
fullWidth	Bool	false	-	Whether or not the Search and its menu will fill the container's width.
containerStyle	Object	false	-	Style prop applied to the Search container element.
menuStyle	Object	false	-	Style prop applied to the menu wrapper.
shortcutCharacter	String	false	-	Character used to display a shortcut icon on the right side of the Search input.
positionFixed	Bool	false	-	Uses `position: fixed` on the tooltip allowing it to show up outside of containers that have `overflow: hidden`.
children	Node	false	-	You can add Search options as children if you want more control over the item rendering. Search MenuItems can take either an item object that maps to your dataSourceConfig, or you can manually set the label and value props on MenuItems.
virtualized	Bool	false	-	Use react-virtualized to render rows as the user scrolls.
virtualizedMenuWidth	Number	false	-	(virtualized only) Width of the menu; unloaded rows may be wider than the initial set.
popperModifiers	Object	false	-	Modifiers to be passed to the Popper element

Calcite React

Search

Import Syntax

Basic Usage

Alternate Styles

Use Remote Data

Replace Search Icon

Array of Objects

Child Items

Custom Items

Dumb Input

Shortcut Character

Virtualized

Custom Styled Input

Props