ReactiveSearch

Question

我已经按照有关 ReactiveSearch 的教程进行操作，并且我将它与 React 和 Appbase.io 上的托管 Elastic 实例一起使用。

我希望用户看到自动建议，但只能从建议列表中 select（所以如果 "foo" 不在建议列表中，查询应该'不被执行）。

这是因为我不想要搜索结果页面，只是为了让应用根据 selected 值立即将您带到正确的页面。

我想我可以用 strictSelection 和 onValueSelected 来做到这一点，但它仍然允许像 "foo" 这样的值（这不是一个自动完成值）通过。

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { ReactiveBase, DataSearch } from "@appbaseio/reactivesearch";

class Main extends Component {
  render() {
    return (
      <div className="flex-col lighter">
        <ReactiveBase
          app="bravos"
          credentials="b8AuX6o06:19f6637f-0a80-48f7-8fe7-9fa0339b7c71"
        >
          <DataSearch
            className=""
            autosuggest={true}
            strictSelection={true}
            componentId="search"
            placeholder="Search Name/Ticker"
            dataField={["symbol", "name"]}
            onValueSelected={value => {
              document.location.href = `./${value}`;
            }}
          />
        </ReactiveBase>
      </div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById("root"));

Codesandbox link: https://codesandbox.io/embed/wqjpoq25w

Answer 1

你差不多明白了。 strictSelection 的关键是还要检查 onValueSelected docs:

中值选择的原因

onValueSelected is called whenever a suggestion is selected or a search is performed by pressing enter key. It also passes the cause of action and the source object if the cause of action was 'SUGGESTION_SELECT'. The possible causes are:

'SUGGESTION_SELECT'

'ENTER_PRESS'

'CLEAR_VALUE'

这个 API 有助于为 strictSelection 编写不同的流程。以下是检查建议选项的方法：

<DataSearch
  ...
  onValueSelected={(value, cause, source) => {
    if (cause === 'SUGGESTION_SELECT') {
      document.location.href = `./${value}`;
    }
  }}
/>

Demo

ReactiveSearch - 不能从自动完成中强制选择（例如strictSelection）？

ReactiveSearch - Can't Force a Selection (e.g. strictSelection) from the autoComplete?

elasticsearch

reactjs