ReactiveSearch

Question

我已经按照有关 ReactiveSearch 的教程进行操作，并且将其与 React 和 Appbase.io 上的托管 Elastic 实例一起使用。我目前有一个自动完成的搜索框，如下面的 CodeSandbox 所示。

我正在努力使 onValueSelected 行为可以引用回 dataField 中的值。例如。如果您键入一个值，代码会将您定向到 document.location.href = './${name}'

想象一下键入 "ap"，按回车键并转到“/apple”，因为它是第一个结果。我找不到有关在 onValueSelected 代码中引用 "name" 的任何信息。

代码沙盒link：https://codesandbox.io/embed/wqjpoq25w

<DataSearch
 className=""
 autosuggest={true}
 strictSelection={true}
 componentId="search"
 placeholder="Search Name/Ticker"
 dataField={["symbol", "name"]}
 onValueSelected={value => {
     document.location.href = `./${value}`;
 }}
/>

Answer 1

在这里使用 strictSelection 您还可以检查值选择的原因，如果值选择的原因是建议，它还会为您提供 source 对象（来自建议）使用哪个您可以提取任何字段。来自 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'

以下是结合选择原因使用 source 对象的方法：

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

Demo

ReactiveSearch - 尝试从映射中查询精确值

ReactiveSearch - trying to query an exact value from the mapping

elasticsearch