0

我正在使用反应即时搜索在选择选项中显示用户列表。我设法在选择选项中显示所有用户，但我只想显示具有管理员角色的用户（角色 === 'admin'）。

当然，我可以通过过滤角色命中来在客户端做到这一点，但是有没有办法通过反应即时搜索来实现这一点？

这就是我向所有用户展示的方式。

AlgoliaProvider.js


import React from "react";
import algoliasearch from "algoliasearch/lite";
import { InstantSearch } from "react-instantsearch-dom";

const searchClient = algoliasearch(
  process.env.REACT_APP_ALGOLIA_APP_ID,
  process.env.REACT_APP_ALGOLIA_SEARCH_KEY
);

const AlgoliaProvider = ({ indexName, children, ...rest }) => {
  return (
    <InstantSearch indexName={indexName} searchClient={searchClient} {...rest}>
      {children}
    </InstantSearch>
  );
};

export default AlgoliaProvider;

自动完成选择.js

import React from 'react';
import {  Select } from 'antd';
import { connectAutoComplete } from 'react-instantsearch-dom';

const { Option } = Select;

const AutoCompleteSelect = ({
  hits,
  refine,
  ...rest
}) => {
  const handleSuggestion = value => {
    refine(value);
  };

    return (
      <Select showSearch onSearch={handleSuggestion} {...rest}>
        {hits.map(user => (
          <Option
            key={user.uid}
            value={user.uid}
          >
            <span>{user.name}</span>
          </Option>
        ))}
      </Select>
    );
 
};

export default connectAutoComplete(AutoCompleteSelect);

应用程序.js

 <AlgoliaProvider indexName="User">             
   <AutoCompleteSelect placeholder="user search" />
 </AlgoliaProvider>
4

2 回答 2

0

您需要刻面功能来实现这一点。在此处阅读更多相关信息：https ://www.algolia.com/doc/guides/managing-results/refine-results/faceting/

我已经通过 UI（algolia 前端）配置了一个这样的方面，然后我在 InstantSearch 中像这样使用它：

<InstantSearch searchClient={.... >

<Configure
   hitsPerPage={<Number>}
   filters={`role:${user.role}`} />
...
...
</InstantSearch>

请参阅代码中的过滤器部分，需要将“角色”添加为配置中的一个方面（通过 ui 或代码）。

于 2021-09-27T16:54:05.157 回答
0

使用Searchstate

<InstantSearch
    ....
    searchState={{
        role: 'admin',
    }}
}}

更多信息：https ://www.algolia.com/doc/api-reference/widgets/ui-state/react/

于 2021-08-14T04:37:57.810 回答