1

我正在做一个项目，我应该在搜索框中实现自动完成功能。我正在使用 React-InstantSearch 并且我的SearchBox组件是使用 Algolia connector 构建的connectSearchBox。现在我想在同一个搜索框中使用connectAutoComplete. 我很困惑这两个连接器应该如何结合在一起？如果你们能在这方面帮助我，我将不胜感激。谢谢！

链接到自动完成连接器：https ://www.algolia.com/doc/api-reference/widgets/autocomplete/react/?client=jsx

以下是相关代码：

搜索框.jsx

export const SearchBoxBase = ({
  className,
  defaultRefinement,
  variant,
  headerTitle,
}) => {

....
....
....

  return (
    <div className={className}>
      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
      <label id="search-input-box" className="fe__searchfield-input-box text-brand-primary">
        { headerTitle || searchText }
      </label>
      <SearchField.Advanced
        className={classNames('fe__searchfield', {
          'fe__searchfield--inverse': variant === STYLE_VARIANTS.inverse,
        })}
        value={defaultRefinement}
        onSubmit={handleSubmit}
        onClear={handleClear}
      >
        <SearchField.Input
          className="form-control-lg"
          aria-labelledby="search-input-box"
          data-nr-synth-id="catalog-search-input-field"
          data-hj-whitelist
        />
        <SearchField.ClearButton data-nr-synth-id="catalog-search-clear-button" />
        <SearchField.SubmitButton data-nr-synth-id="catalog-search-submit-button" />
      </SearchField.Advanced>
    </div>
  );
};


export default connectSearchBox(SearchBoxBase);

这就是我打算添加到 SearchBox 组件中的内容：

const Autocomplete = ({ hits, currentRefinement, refine }) => (
  <ul>
    <li>
      <input
        type="search"
        value={currentRefinement}
        onChange={event => refine(event.currentTarget.value)}
      />
    </li>
    {hits.map(hit => (
      <li key={hit.objectID}>{hit.name}</li>
    ))}
  </ul>
);

const CustomAutocomplete = connectAutoComplete(Autocomplete);

在我的情况下，<input>标签将被替换为<SearchField.Input>inSearchBox.jsx

4

1 回答 1

0

推荐的方法是将您的 InstantSearch 搜索框切换为虚拟组件，并将自动完成搜索框用作所有页面（包括搜索页面）的主要界面。

分步指南在这里： https ://www.algolia.com/doc/ui-libraries/autocomplete/guides/using-instantsearch/

于 2022-02-28T22:11:10.337 回答