我已经遵循了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