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

我正在尝试使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}`;
 }}
/>

最佳答案

在这里,您还可以使用strictSelection检查值选择的原因,如果值选择的原因是一个建议,它还将为您提供source对象(根据建议),您可以使用该对象提取任何字段。从onValueSelected docs:

这是将source对象与选择原因结合使用的方式:

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

09-27 23:45