Closed allendol closed 5 years ago
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.
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) } }
If you already have autosuggest
as false
, you can use onValueChange
instead.
onValueSelected
is helpful if you have autosuggest
as true
.
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?
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.
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"?
Sure, you can refer the following for react-router:
and learn about conditional rendering here.
Hello @allendol. Did you find a solution? The way I do it is:
Here is one way to achieve this. The important pieces are:
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));
@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:
const search = (value) => {
props.history.push("/search?q=" + value)
}
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.
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!
Closing this for now. Related question.
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!
@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.
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: