Error - PrimeReact Autocomplete suggestions not showing

Question

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

I am trying to load suggestions dropdown as soon as component loads with some data in componentDidMount . The suggestionsList is updating with the obj data in componentDidMount , however suggestion dropdown is not showing.

Simply, whenever input is get focussed and no input text is there, a suggestion dropdown should show.

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

Answer 1

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. Inside completeMethod you need to filter your data that's how your dropdown list reduces as you type more.

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.

Here is simple POC I create for reference. Try typing 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

Answer 2

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