Reactivesearch: Add onValueSelected prop for search components

[divyanshu013]

Issue Type:

Enhancement

Description:

Add a new prop onValueSelected to search components DataSearch and CategorySearch. This will accept a function which will be invoked with the current value when the selected value of the component changes (user presses enter or selects a suggestion or clicks outside). In case of autosuggest set to false this behaves like onValueChange.

This prop will eliminate the need of having an extra component watching the search component with react prop. This also solves a use case of only using the search component for suggestions and displaying the results in a different page with the help of URLParams.

Update - We can also extend the CategorySearch by passing the selected category along with the value to this function. A very interesting and useful usecase is using this category to set the value of a different component, say MultiList as in the Car Store example app.

[metagrover]

Use onQueryChange instead.

onValueChange gets fired while typing and suggestion selection, but onQueryChange only gets fired when the value is selected.

cc: @Guazi - https://codesandbox.io/s/9yz95rnz14

[metagrover]

Turns out, the above logic only works with ReactiveList watching the source component, which is not how we should be supporting this. It causes an additional query to fire and also needs additional efforts to visibly hide the unnecessary ReactiveList component from the screen if the user wants to only show a search-box like that of Google's homepage.

Hence, I suggest it'd be best if we support onValueSelected on suggestions-enabled components.

[siddharthlatest]

What is a good use-case where someone would want a DataSearch component but not the associated Result component?

[metagrover]

Consider this:
you need a page like google homepage, where once the suggestion value is selected, you move to a different page and render results there (like google does with a search-box and results in one page).

[calebdel]

I'm looking for something very similar - a universal search bar (Data Search component) in our app header, that renders results on a specific results page that also includes filters.

[divyanshu013]

This will be available in the next release. The docs have been updated for more info:

onValueSelected

is called with the value selected via user interaction. It works only with autosuggest and is called whenever a suggestion is selected or a search is performed either by pressing enter key or the input is blurred.

[iksnae]

has this been released? I'm using DataSearch component with onValueSelected set but handler is never invoked. Note: I'm using React Native

[siddharthlatest]

@iksnae This isn't available in React Native yet. Doc ref: https://opensource.appbase.io/reactive-manual/native/components/datasearch.html. Can you create an enhancement issue for this? Would you like to take a stab at porting this to the RN lib?

[iksnae]

@siddharthlatest thank you. i just took a crack at it and created pull request. https://github.com/appbaseio/reactivesearch/pull/737

[OElesin]

The onValueSelected does seem to work with VueJS. Or am I doing something wrong? See code below

<DataSearch
      componentId="search"
      iconPosition="right"
      :dataField="[
        'title',
        'title.autosuggest',
        'title.english',
        'title.keyword',
        'title.search'
    ]"
      class="data-search"
      :showClear="false"
      placeholder="I am looking for"
      :onValueSelected="loadSomething"
    />

[grantas33]

why doesn't onValueSelected fire on search icon click?

[epsiont]

I have similar problems, how to make it work?

why doesn't onValueSelected fire on search icon click?