ReactiveSearch -不能强制从autoComplete中选择(例如strictSelection)吗？

Question

我已经学习了关于ReactiveSearch的教程，并且我将它与React一起使用，并在Appbase.io上使用一个托管的弹性实例。

我希望用户能够看到自动建议，但只能从建议列表中进行选择(因此，如果"foo“不在建议列表中，则不应该执行查询)。

这是因为我不想有一个搜索结果页面，只是为了让应用程序立即带你到正确的页面，根据所选的值。

我以为我可以用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"));

代码框链接：https://codesandbox.io/embed/wqjpoq25w

Answer 1

你差点就拿到了。使用strictSelection的关键是检查onValueSelected 文档中的值选择原因。

每当选择建议或按enter键执行搜索时，都会调用onValueSelected。如果操作的原因是“建议_SELECT”，它还传递操作的原因和源对象。可能的原因是： 'SUGGESTION_SELECT‘ 'ENTER_PRESS‘ 'CLEAR_VALUE‘

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

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

演示