Instant Meilisearch React: How do I hide data before user input?

Question

I am using Meilisearch Instant to show search results. I want to show only search results when user type in something in searchbox. However, if I follow documentation the page shows all data even before searching anything. How do I hide data and only show the search results when user types?

  import {
  InstantSearch,
  InfiniteHits,
  SearchBox,
  Stats,
  Highlight,
} from "react-instantsearch-dom";
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";

const searchClient = instantMeiliSearch("http://127.0.0.1:7700", "");

const Search = () => {
  return (
    <div className="ais-InstantSearch">
      <InstantSearch indexName="blogpost" searchClient={searchClient}>
        <SearchBox />
        <InfiniteHits hitComponent={Hit} />
      </InstantSearch>
    </div>
  );
};

const Hit = ({ hit }) => (
  <div key={hit.id}>
    <div className="hit-title">
      <Highlight attribute="title" hit={hit} />
    </div>
  </div>
);
export default Search;

score 0 · Accepted Answer · answered Aug 29 '22 at 07:26

0

You have to set placeholderSearch as false:

const searchClient = instantMeiliSearch(
  'http://127.0.0.1:7700',
  '',
  {
    placeholderSearch: false
  }
)

answered Aug 29 '22 at 07:26

CaroFG

407
2
5

Instant Meilisearch React: How do I hide data before user input?

1 Answers1