[英]ReactiveSearch - Can't Force a Selection (e.g. strictSelection) from the autoComplete?
I've followed the tutorials on ReactiveSearch, and I'm using it with React and a hosted Elastic instance on Appbase.io. 我已经遵循了ReactiveSearch上的教程,并且将它与React以及Appbase.io上的托管Elastic实例一起使用。
I want the user to see auto suggestions, but then only be able to select from the list of suggestions (so if "foo" isn't in the list of suggestions, the query shouldn't be executed). 我希望用户看到自动建议,但是只能从建议列表中进行选择(因此,如果“ foo”不在建议列表中,则不应执行查询)。
This is because I don't want to have a search results page, just for the app to immediately take you to the right page based on the selected value. 这是因为我不想有一个搜索结果页面,只是为了让应用程序根据所选值立即将您带到正确的页面。
I thought I could do this with strictSelection and onValueSelected , but it still is allowing a value like "foo" (which is not an autocomplete value) to go through. 我以为我可以使用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 link: https://codesandbox.io/embed/wqjpoq25w Codesandbox链接: https ://codesandbox.io/embed/wqjpoq25w
You've almost gotten it. 您已经快懂了。 The key here with
strictSelection
is to also check the cause of value selection in onValueSelected
docs : strictSelection
的关键是还要检查onValueSelected
docs中值选择的原因:
onValueSelected
is called whenever a suggestion is selected or a search is performed by pressing enter key.每当选择建议或通过按Enter键执行搜索时,都会调用
onValueSelected
。 It also passes the cause of action and the source object if the cause of action was 'SUGGESTION_SELECT'.如果原因是“ SUGGESTION_SELECT”,它也会传递原因和源对象。 The possible causes are:
可能的原因是:
'SUGGESTION_SELECT'
'SUGGESTION_SELECT'
'ENTER_PRESS'
ENTER_PRESS
'CLEAR_VALUE'
“ CLEAR_VALUE”
This API helps in writing different flows for strictSelection
. 该API有助于为
strictSelection
编写不同的流程。 Here's how you may check for a suggestion selection: 您可以按照以下方法检查建议的选择:
<DataSearch
...
onValueSelected={(value, cause, source) => {
if (cause === 'SUGGESTION_SELECT') {
document.location.href = `./${value}`;
}
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.