1

I'm new to ReactiveSearch library, and I implemented the DataSearch component with autosuggestion as my in-site SearchBar. I added value and onChange to in order to store the input value as a state, but as soon as I added the value prop, I can't type in the search bar any more. What's wrong?

I also want to know what kind of callback function can I use when I click one of the suggestions to trigger some event, I tried onClick, but it didn't work. Here is my code, any help is appreciated!

import * as React from 'react';
import {
  ReactiveBase,
  DataSearch,
} from '@appbaseio/reactivesearch';

import './SearchBar.scss';

export default class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = { searchTerm: '' };
  }

  handleInputChange = (event) => {
    this.setState({ searchTerm: event.target.value });
  };

  handleSearch = () => {
  // do something...
  };

  public render() {
    return (
      <React.Fragment>
        <ReactiveBase
          app="rooms,floors,assets"
          url="http://localhost:9200"
          headers={{
            'Access-Control-Allow-Origin': '*'
          }}
          style={{ display: 'inline' }}
        >
          <DataSearch
            componentId="SearchRoom"
            dataField={['roomName', 'roomNumber', 'floorName', 'assetName']}
            placeholder="Search for rooms or assets"
            style={{ width: 500, display: 'inline-block' }}
            fuzziness={1}
            value={this.state.searchTerm}
            onChange={this.handleInputChange}
            //how to trigger handleSearch when I click one of the suggestions?
          />
        </ReactiveBase>
      </React.Fragment>
    );
  }
}
Chloe Sun
  • 111
  • 1
  • 6

1 Answers1

1

onChange returns the updated value it does not return a Synthetic Event. I have updated the Demo of DataSearch component from the docs to use controlled behavior.

I have also added a callback which would get called when you select any suggestion. You can make use of downShiftProps to achieve this.

Check the app here. You can also read more about this props here.

Hope this helps!

Yash Joshi
  • 2,586
  • 1
  • 9
  • 18