CODEWITHSUNDEEP
reactjselasticsearchreactivesearch
Krzysiek Kołacz
Krzysiek Kołacz

Reputation: 11

ReactiveSearch only autocomplete

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?

Upvotes: 0

Views: 860

Answers (2)

Divyanshu Maithani
Divyanshu Maithani

Reputation: 14976

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)}
/>

Upvotes: 2

Hamuel
Hamuel

Reputation: 633

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

Upvotes: 2

Related Questions