CODEWITHSUNDEEP
reactjsautocompletematerial-ui
Alexander
Alexander

Reputation: 1378

Material UI auto complete value and onChange

I'm trying to implement auto complete on Material UI component,

this is their code :

  <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />

the full code you can find here :https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/autocomplete/ComboBox.js

my question is, how do I add onChange and be able to show the value that was selected, as we do in Input we just show value={} but in here it does not work, and I cannot find anything about it in the documentation, thanks for the help!

Upvotes: 0

Views: 6976

Answers (3)

Lathif Jumatiawan
Lathif Jumatiawan

Reputation: 75

<Autocomplete
   onChange={(e,v) => console.log(v)}
   options={top100Films}
   getOptionLabel={(option) => option.title}
   renderOption={(props, option) => (
      <li {...props}>
         {option.title}
      </li>
   )}
   renderInput={(params) => <TextField {...params} required />}
/>

I'm using onChange props onChange={(e,v) => console.log(v)}

Upvotes: 0

&#214;mer Keskinkilic
&#214;mer Keskinkilic

Reputation: 83

Answer for your question is here :

Usage of onChange with AutoComplete Material Ui

You should use onChange properly. The value lays on the second parameter of the callback function.

Upvotes: 1

Michael Nelles
Michael Nelles

Reputation: 6032

If you want to show the value of the textfield I have inserted the following onChange={e=>changeHandler(e.target.value)}

// in Hooks area
const changeHandler = value => {
    console.log(value); // value should be here
}

  <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField onChange={e=>changeHandler(e.target.value)} {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />

Upvotes: 0

Related Questions