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?

score 2 · Answer 1 · answered May 08 '18 at 07:45

2

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

answered May 08 '18 at 07:45

Hamuel

633
5
16

Yep i now the solution with button to submit, but i want it to work without additional button- just by presing enter. – Krzysiek Kołacz May 08 '18 at 07:54
there is also onKeyDown where you can check the keyCode that it is equal to enter and then send your request by calling a fucntion – Hamuel May 08 '18 at 07:57
ok good point, that will resolve problem with pressing enter. What about with selected value from dropdown list by mouse click – Krzysiek Kołacz May 08 '18 at 08:00
you might want to take advantage of onQueryChange when the user change the query and you can trigger some kind of function call btw onQueryChange have two parameter prevQuery and nextQuery example is in the doc I am not sure this will solve you problem but there is no onClick handler – Hamuel May 08 '18 at 08:05
1

`onValueChange` will always give you the current value even if its selected from the suggestions. So you can update your local state with this value and invoke your submit method with `onQueryChange` (also saves you the trouble of adding key press events). I can add an answer if its not clear. – Divyanshu Maithani May 09 '18 at 10:58

score 2 · Answer 2 · answered Jul 02 '18 at 17:48

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

ReactiveSearch only autocomplete

2 Answers2