[英]Error - PrimeReact Autocomplete suggestions not showing
https://primefaces.org/primereact/showcase/#/autocomplete https://primefaces.org/primereact/showcase/#/autocomplete
I am trying to load suggestions dropdown as soon as component loads with some data in componentDidMount
.我试图在组件加载componentDidMount
中的一些数据后立即加载建议下拉列表。 The suggestionsList
is updating with the obj
data in componentDidMount
, however suggestion dropdown is not showing. suggestionsList
正在使用componentDidMount
中的obj
数据进行更新,但是未显示建议下拉列表。
Simply, whenever input is get focussed and no input text is there, a suggestion dropdown should show.简单地说,只要输入集中并且没有输入文本,就应该显示一个建议下拉列表。
class abcCmp extends React.Component {
state;
constructor() {
super();
this.state = {
suggestionsList: []
};
}
componentDidMount() {
let obj = [{'color':'red',name: 'Danny', id: '1'}];
this.setState({suggestionsList: [...obj]})
}
render(){
return (
<div className="containerBox">
<AutoComplete suggestions={this.state.suggestionsList}
minLength={1} placeholder="Add People" field="name" multiple={true}
autoFocus={true} />
</div>
)
}
If you gone through documentation there are other parameters also required.如果您浏览了文档,还需要其他参数。 Those are: completeMethod
, value
, onChange
out of these completeMethod
is required to show filtered list as you type.这些是: completeMethod
, value
, onChange
这些completeMethod
需要在您键入时显示过滤列表。 Inside completeMethod
you need to filter your data that's how your dropdown list reduces as you type more.在completeMethod
中,您需要过滤您的数据,这就是您的下拉列表随着您键入更多内容而减少的方式。
You need ref
for toggling dropdown functionality and also you need to check on focus if input value is empty and no value is selected so toggle dropdown.您需要ref
来切换下拉功能,如果输入值为空且未选择任何值,则还需要检查焦点,以便切换下拉列表。
Here is simple POC I create for reference.这是我创建的简单 POC,以供参考。 Try typing D
尝试输入D
Code:代码:
import React from "react";
import { AutoComplete } from "primereact/autocomplete";
import "./styles.css";
let obj = [
{ color: "red", name: "Dagny", id: "1" },
{ color: "red", name: "kanny", id: "2" },
{ color: "red", name: "Dgnny", id: "3" },
{ color: "red", name: "Danny", id: "4" },
{ color: "red", name: "Dmnny", id: "5" },
{ color: "red", name: "Donny", id: "" }
];
class MyComponent extends React.Component {
myRef = React.createRef();
constructor() {
super();
this.state = {
suggestionsList: [],
selected: null,
inputValue: null
};
}
componentDidMount() {
this.setState({ suggestionsList: [...obj] });
}
searchList = (event) => {
let suggestionsList;
if (!event.query.trim().length) {
suggestionsList = [...obj];
} else {
suggestionsList = [...obj].filter((list) => {
return list.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
this.setState({ suggestionsList });
};
render() {
return (
<div className="containerBox">
<AutoComplete
suggestions={this.state.suggestionsList}
completeMethod={this.searchList}
minLength={1}
ref={this.myRef}
dropdown
inputId="my"
placeholder="Add People"
field="name"
onFocus={(e) => {
if (!this.state.inputValue && !this.state.selected) {
this.myRef.current.onDropdownClick(e, "");
}
}}
onKeyUp={(e) => this.setState({ inputValue: e.target.value })}
// completeOnFocus={true}
multiple={true}
autoFocus={true}
value={this.state.selected}
onChange={(e) => this.setState({ selected: e.value })}
/>
</div>
);
}
}
export default function App() {
return (
<div className="App">
<MyComponent />
</div>
);
}
Demo: https://codesandbox.io/s/prime-react-autocomplete-forked-n3x2x?file=/src/App.js演示: https://codesandbox.io/s/prime-react-autocomplete-forked-n3x2x?file=/src/App.js
Add dropdown inside autocomplete tags and also add completeMethod and bind it to a search/filter function, add a value to bind the selected value, add a onChange function to it You can find full documantation and working example here: PrimeFaces React Autocomplete在自动完成标签内添加下拉列表并添加 completeMethod 并将其绑定到搜索/过滤器 function,添加一个值以绑定所选值,向其添加一个 onChange function 您可以在此处找到完整的文档和工作示例: PrimeFaces React Autocomplete
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.