ReactJs AutoComplete not showing on the dropdown using antd

Question

I am creating a component with auto-search using API. searching values are successfully console logging. but not display on the auto search dropdown on react class component.

following is the method what I have tried.

class AutoCompleteModel extends Component {

  state = {
    autcompleteOptions: [],
  };

  onSearchAutoComplete = async (text) => {
    console.log(text);
    await http
      .get("contact/autcomplete/" + text)
      .then((response) => {
        let i = response.data.result;
        this.setState({
          autcompleteOptions: i,
        });
        console.log(this.state.autcompleteOptions);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  render() {
    let { autcompleteOptions } = this.state;

    return (
      <>
        <Row>
          <Col
            xl={6}
            lg={6}
            md={6}
            sm={6}
            xs={24}
          >
            <AutoComplete
              options={this.state.autcompleteOptions}
              style={{
                width: "100%",
              }}
              placeholder="Auto complete search"
              onSearch={this.onSearchAutoComplete}
            >
           </AutoComplete>
          </Col>
        </Row>
      </>
    );
  }
}

export default AutoCompleteModel;

suggest me the best way to solve this issue

score 3 · Accepted Answer · answered Aug 16 '21 at 21:16

I have solved this issue by finding what's wrong. the first thing to display on the dropdown autocomplete should have an option attribute objects of an array. that should possess the key name as a label in order to display on the auto search.

      { value: "light", label: "Light23" },
      { value: "bamboo", label: "Bamboo213" },

what I have done is I send the Json response with the column name label, which fixed the issue

ReactJs AutoComplete not showing on the dropdown using antd

1 Answers1