0

https://primefaces.org/primereact/showcase/#/autocomplete

我试图在组件加载一些数据后立即加载建议下拉列表componentDidMount。正在使用 中的数据进行suggestionsList更新，但未显示建议​​下拉菜单。objcomponentDidMount

简单地说，只要输入得到关注并且没有输入文本，就会显示一个建议下拉菜单。

abcCmp.jsx

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>
           )
    }
4

2 回答 2

1

如果您浏览了文档，则还需要其他参数。这些是：completeMethod, value,onChange其中completeMethod需要在您键入时显示过滤列表。在里面completeMethod你需要过滤你的数据，当你输入更多时，你的下拉列表会减少。

您需要ref切换下拉功能，如果输入值为空且未选择任何值，则还需要检查焦点，因此切换下拉。

这是我创建的简单 POC 供参考。尝试输入D

代码：

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>
  );
}

演示：https ://codesandbox.io/s/prime-react-autocomplete-forked-n3x2x?file=/src/App.js

于 2020-09-11T11:13:57.943 回答
0

在自动完成标签中添加下拉菜单，并添加 completeMethod 并将其绑定到搜索/过滤函数，添加一个值以绑定所选值，为其添加一个 onChange 函数您可以在此处找到完整的文档和工作示例：PrimeFaces React Autocomplete

于 2020-09-11T10:38:08.883 回答