ReactiveSearch only autocomplete

Question

I want to use ReactiveSearch library only for autocomplete with submit.

 const Search = () => ( <div className="search-field"> <ReactiveBase app="good-books-ds" credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d" > <div className="row"> <div className="col"> <DataSearch dataField={['original_title', 'original_title.search']} categoryField="authors.raw" componentId="BookSensor" /> </div> </div> </ReactiveBase> </div> ) export default Search 

I tried making the input as above with <DataSearch ... /> and it works, but it doesn't have submit option. I tried to wrap it with form, but after enter or select value it doesn't fire.

Any suggestions?

Answer 1

https://opensource.appbase.io/reactive-manual/search-components/datasearch.html

you need to read the doc carefully there is onValueChange handler so when you type in something you can set the state first set the initial state state = {searchText: ""} at the top after that in Data search prop you can do the following

<DataSearch onValueChange = {(e) => this.setState({searchText: value})} />

now make you own button and submit the value in the state for example this.state.searchText

Answer 2

ReactiveSearch now supports an onValueSelected prop which is perfect for usecases where you are only interested in utilizing the selected value (either selecting a suggestion or hitting Enter key). Docs and example usage:

<DataSearch
  ...
  onValueSelected={(value) => console.log('The selected value is', value)}
/>