reactjstypescriptmaterial-uimui-autocomplete

react autocomplete how to show options

I am using autocomplete component from @material-ui/lab/autocomplete and want to get result title_display in options field .These results are coming from an api using axios .

You can see my code here--> https://codesandbox.io/s/runtime-dew-zbs8x?file=/src/Search.js

Please see if you can help me.

Solution

  • The problem with your code is onChange on the Autocomplete component is not triggered and hence the query in the state is not updated.

    Passing onInputChange instead of onChange to the Autocomplete component and changing handleInputChange like below will work.

    handleInputChange = (event, value) => {
  this.setState({
      // see the change made in below line
      query: value
   }, () => {
      if (this.state.query && this.state.query.length > 1) {
        if (this.state.query.length % 3 === 0) {
            this.getInfo()
          }
        } else if (!this.state.query) {
          console.log("Nothing to see !")
        } 
    })
}

    Please refer to the library documentation on the more usage. Controllable State