ReactiveSearch-無法從自動完成中強制選擇（例如strictSelection）嗎？

Question

我已經遵循了ReactiveSearch上的教程，並且將它與React以及Appbase.io上的托管Elastic實例一起使用。

我希望用戶看到自動建議，但是只能從建議列表中進行選擇（因此，如果“ 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"));

Codesandbox鏈接： https ://codesandbox.io/embed/wqjpoq25w

Answer 1

您已經快懂了。 strictSelection的關鍵是還要檢查onValueSelected docs中值選擇的原因：

每當選擇建議或通過按Enter鍵執行搜索時，都會調用onValueSelected 。 如果原因是“ SUGGESTION_SELECT”，它也會傳遞原因和源對象。 可能的原因是：

'SUGGESTION_SELECT'

ENTER_PRESS

“ CLEAR_VALUE”

該API有助於為strictSelection編寫不同的流程。 您可以按照以下方法檢查建議的選擇：

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

演示版