![](/img/trans.png)
[英]React autocomplete in a textarea like in an IDE (e.g. VS Code, Atom)
[英]ReactiveSearch - Can't Force a Selection (e.g. strictSelection) from the autoComplete?
我已经遵循了ReactiveSearch上的教程,并且将它与React以及Appbase.io上的托管Elastic实例一起使用。
我希望用户看到自动建议,但是只能从建议列表中进行选择(因此,如果“ foo”不在建议列表中,则不应执行查询)。
这是因为我不想有一个搜索结果页面,只是为了让应用程序根据所选值立即将您带到正确的页面。
我以为我可以使用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链接: https ://codesandbox.io/embed/wqjpoq25w
您已经快懂了。 strictSelection
的关键是还要检查onValueSelected
docs中值选择的原因:
每当选择建议或通过按Enter键执行搜索时,都会调用
onValueSelected
。 如果原因是“ SUGGESTION_SELECT”,它也会传递原因和源对象。 可能的原因是:'SUGGESTION_SELECT'
ENTER_PRESS
“ CLEAR_VALUE”
该API有助于为strictSelection
编写不同的流程。 您可以按照以下方法检查建议的选择:
<DataSearch
...
onValueSelected={(value, cause, source) => {
if (cause === 'SUGGESTION_SELECT') {
document.location.href = `./${value}`;
}
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.