时间戳

首页 > 解决方案 > 将参数传递给 Algolia React Instant SearchBox

javascript - 将参数传递给 Algolia React Instant SearchBox

问题描述

我正在使用 React 构建一个网站，并且我正在使用 algolia Instantsearch。我设法创建了一个搜索页面，该页面按搜索显示所有结果和过滤器。我想在即时搜索中使用来自不同页面的外部搜索输入。

我想要的是搜索结果页面已经被搜索输入参数过滤。我已经创建了一个类似 (https://url/search/q=name) 的页面，但结果页面没有使用参数。即时搜索显示所有结果。

我怎样才能做到这一点？我可以阅读的任何建议或链接将不胜感激。

我的代码如下所示：


import algoliasearch from "algoliasearch/lite";

var url_string = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search;

var url = new URL(url_string);

var q = url.searchParams.get("q");

const searchClient = algoliasearch(
  "xxxxxxxxxx",
  "xxxxxxxxxxxxxxxxx"
);

function BusinessesSection({ busData }) {

  var stateMapping = {
    stateToRoute(uiState) {
      const indexUiState = uiState['Test'];
      return {
        query: indexUiState.query,
        page: indexUiState.page,
        // ...
      };
    },
  
    routeToState(routeState) {
      return {
        ['Test']: {
          query: routeState.query,
          page: routeState.page,
          // ...
        },
      };
    },
  };

  const Hit = ({ hit }) => (
    <Item.Group divided key={hit.id}>
      <Item fluid>
          
        <Item.Header> {hit.name} </Item.Header>
        <Item.Description> {hit.business_json.description} </Item.Description>

        <Button onClick={() => { handleSingle(hit);}}> View More </Button>
      </Item>
    </Item.Group>
  );

  return (
    <div>
      <InstantSearch
        searchClient={searchClient}
        indexName="Test"
        routing = {
          stateMapping = function (uiState) {
            return {
              q: uiState['Test'].query,
            }
          },
          stateMapping.routeToState = function (routeState) {
            return {
              query: routeState.q
            }
          }
        }
      >
      
      </InstantSearch>
    </div>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BusinessesSection);

标签： javascriptreactjsalgolia

解决方案

要在搜索框中进行默认搜索，可以使用defaultRefinementReact InstantSearch 的 SearchBox 小部件上的参数。您可以在此处添加外部搜索输入的值，然后它就会开箱即用。

<SearchBox
    defaultRefinement={q}
    translations={{
    placeholder: "Search …&quot;
}}

默认细化是一个字符串

推荐阅读