1

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>
           )
    }
Mahi
  • 3,748
  • 4
  • 35
  • 70

2 Answers2

2

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

Shubham Verma
  • 4,918
  • 1
  • 9
  • 22
  • The demo is not working. The requirement is whenever input get focussed and no input text is there, a suggestion dropdown should show with some data. – Mahi Sep 12 '20 at 21:23
  • Prime react does not provide this functionality. So have to do some change by its self. Updated my answer plz check again – Shubham Verma Sep 13 '20 at 06:13
  • After adding few chips when we delete those inspite it is focussed and even we focus it again it does not work. Also, after some suggestion is selected (then chips added) and input get focussed and input text length is zero, still the suggestion dropdown not visible. – Mahi Sep 13 '20 at 06:44
  • That condition you can change on your `onFocus`. It just poc to give you context – Shubham Verma Sep 13 '20 at 06:54
  • ok, will give it a try. Can we have multiple fields here like field={"name" | "color"} – Mahi Sep 13 '20 at 08:44
  • this.myRef.current.onDropdownClick(), did the job.Thanks – Mahi Sep 17 '20 at 06:33
0

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

Daniel Gheorghe
  • 1
  • 1