Question

我已经遵循了ReactiveSearch上的教程，并且将它与React以及Appbase.io上的托管Elastic实例一起使用。我目前有一个自动完成的搜索框，如下面的代码沙盒所示。

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

想象一下，键入“ ap”，然后按回车并被带到“ / apple”，因为这是第一个结果。在onValueSelected代码中找不到有关引用“名称”的任何信息。

CodeSandbox链接：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：

  每当选择建议或通过按Enter键执行搜索时，都会调用
onValueSelected。如果原因为“ SUGGESTION_SELECT”，它也会传递原因和source对象。可能的原因是：

“ 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-尝试从映射查询确切值

1 个答案: