Reactivesearch: When I use ReactiveSearch, on the form load I don't want to display any result. I just want to display the search box. I want to display the result only when user searches something. How can I do it? The current default setting is in the way that when user comes to the page see the result for all. Where as in many cases is not needed.

[allendol]

Issue Type:

Platform:

Description:

Screenshots:

Minimal reproduction of the problem with instructions:

Reactivesearch version: x.y.z

Browser: [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Anything else:

[metagrover]

We support an event called onValueSelected which gets fired whenever the user executes a search operation (by selecting a suggestion [or] pressing Enter [or] blurring the input field).

You can handle the page routing or conditional rendering in onValueSelected to show the results component accordingly as per your needs.

[allendol]

onValueSelected is the event within DataSearch component which is trigged only when autosuggest is {true} which is slight limitation.
How can it hide or can change the property on ResultList component and prevent it to display or prevent it to render when value of the function is empty?

onValueSelected={
function (value) {
console.log("current value: ", value)
}
}

[metagrover]

If you already have autosuggest as false, you can use onValueChange instead.

onValueSelected is helpful if you have autosuggest as true.

[allendol]

All I want is when I go to the page I see the search control and displaying no result. Like google.com
When you go to google.com, you don't see millions of results. Just a search box ready to accept entry to start searching.
what can I set onValueSelected and or anywhere else to display nothing when the page is rendered?

[metagrover]

As I have mentioned before, you can either take it to a different route where your search results will be rendered (via react-router or any other router of your choice), or if you want to render the results on the same page without changing the url, you can use conditional rendering to only render the results component when you have a valid search value selected.

[allendol]

I am new to this. More info saves me time to find out.
Can you send me the link about using "conditional rendering" and also "react-router"?

[metagrover]

Sure, you can refer the following for react-router:

• React rotuer Official Quickstart guide
• React router tutorial

and learn about conditional rendering here.

[coommark]

Hello @allendol. Did you find a solution? The way I do it is:

Here is one way to achieve this. The important pieces are:

1. import {withRouter}
2. Create redirect function
3. Connect component (wrap it in withRouter)

import React from 'react';
import { withRouter } from 'react-router-dom';
import { DataSearch } from '@appbaseio/reactivesearch';
import { connect } from 'react-redux';

const Sample = (props) => {
    const redirect = () => {
        props.history.push("/search")
    }
    return(        
        <div className="col-md-6 offset-md-3">
            <h1 className="tagline text-center mt-4 mb-2">
                Search for products...
            </h1>
            <div className="input-group input-group-lg col-md-10 offset-md-1 my-2">
                <DataSearch
                    componentId="mainSearch"
                    dataField={["name", "name.search", "description", "description.search"]}
                    queryFormat="and"
                    placeholder="I'm searching for..."
                    className="form-control"
                    id="search-field"
                    showIcon={false}
                    onValueSelected={redirect}
                />                            
            </div>
        </div>
    );
}

export default withRouter(connect(null)(Sample));

[coommark]

@siddharthlatest @metagrover Real quick let me run this by you. My requirements is exactly like the one above by @allendol so what I currently do is:

1. Created a page just like Google homepage with CategorySearch (but without results list)
2. When user performs search, in onValueSelected, I execute the function below:

const search = (value) => {
        props.history.push("/search?q=" + value)
}

1. On the Search page (component), I grab the query string from the URL and pass it into a defaultQuery so that it returns only the results based on the query string
2. On the Search Page (component), if a user performs a search, the search function is re-run and the page is reloaded.

My question is, what will you do differently? So far this works for me quite well. But this is the first sample app I built with it (so I still don't understand many things). Thank you always.

[metagrover]

Hi @coommark, you have got the basics right, but you're complicating things a little bit. You don't need to set the query via defaultQuery on the results page. (There's a prop called URLParams which can be used to do this automatically)

Ideally, the same CategorySearch should be present on the results page as well (for better UX and design), this will allow the CategorySearch component on the new route to automatically fetch the selected value from the reactivesearch-redux-store (or) pick the selected value from the URL (incase of reloads). Then, if you just set the react prop of the result component to watch for the CategorySearch, it will generate the query on its own and you can save yourself from the trouble of setting the defaultQuery manually.

This will also prevent unnecessary reloads on further searches.

Hope that helps!

[divyanshu013]

Closing this for now. Related question.

[iksnae]

hello. thank you for sharing your challenges and solutions. i've encountered a related issue, where the onValueSelected handler isn't being invoked when search result item is selected. note: I am using React Native. I've tried the solutions offered here and elsewhere but having no luck.

any help is greatly appreciated. thank you!

[siddharthlatest]

@iksnae Can you open a separate issue? Please mention the lib version being used, and if you have a reproducible snack showing the issue, that would be perfect for us to debug quickly.