results automatically show up on starting the react web application

[HesterG]

Affected Projects

React JS

Is your feature request related to a problem? Please describe.

I am trying to add a search feature to my web application, and on starting the web application, all results automatically shows even i haven't click on search.

Describe the solution you'd like

When the web application is started, i don't want the search results to appear automatically. I want the results to appear only after i do search for something.

[siddharthlatest]

@HesterG You can configure this behavior. I will move this to Discussions.

You can use the defaultQuery on the component to configure the default query to use. Or if you can share your code snippet, happy to guide on how to.

[HesterG]

@siddharthlatest Thanks for the advice, it will be very useful if you can guide me how to use the defaultQuery, below is my code snippet that uses Reactsearch. Thanks in advance.

<ReactiveBase>
......
<DataSearch
    componentId="SearchBox"
    dataField={['name', 'location']}
    title="Search"
    defaultValue="project"
    fieldWeights={[1, 3]}
    placeholder="Search for project name or location"
    autosuggest={true}
    highlight={true}
    highlightField="name"
    queryFormat="or"
    fuzziness={0}
    debounce={100}
    size={10}
    showClear={true}
    showVoiceSearch={true}
/>
<ReactiveList
    componentId="result"
    title="Results"
    dataField="name"
    from={0}
    size={5}
    pagination={true}
    react={{
        and: ['SearchBox'],
    }}
    render={({ data }) => (
        <ReactiveList.ResultCardsWrapper>
            {data.map(item => (
                <ResultCard key={item._id} href={item.project_url}>
                    <ResultCard.Image src="https://bit.do/demoimg" />
                    <ResultCard.Title
                        dangerouslySetInnerHTML={{
                            __html: item.name,
                        }}
                    />

                    <ResultCard.Description>
                        <div>
                        {item.location + ' ' + item.year}
                        </div>
                    </ResultCard.Description>
                </ResultCard>
            ))}
        </ReactiveList.ResultCardsWrapper>
    )}
/>
......
</ReactiveBase>