即时Meilisearch的反应:如何在用户输入之前隐藏数据？

Question

我正在使用Meilisearch即时显示搜索结果。当用户在搜索框中输入某些内容时，我只想显示搜索结果。但是，如果我遵循文档，页面甚至在搜索任何内容之前都会显示所有数据。如何隐藏数据并仅在用户键入时显示搜索结果？

  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;

Answer 1

必须将placeholderSearch设置为false：

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