How customize material ui select-CodePudding

I'm trying to customize material-ui dropdown, to make it something like this, here is the link https://codesandbox.io/s/busy-black-2fgdn?file=/src/App.js,

if I write 1 in the input (from) it selects the option that starts with 1 instead of writing in input, if none of the options starts with the number entered in the input then it writes in the input,

CodePudding user response：

Use Autocomplete with freeSolo as a prop. check the docs here => https://mui.com/components/autocomplete/#free-solo

const dataList = [
  { title: "10-100", value: "10-100" },
  { title: "100-200", value: "100-200" },
  { title: "200-300", value: "200-300" },
  { title: "300-400", value: "300-400" }
];
...

<Autocomplete
    id="free-solo-demo"
    freeSolo
    options={dataList.map(option => option.title)}
    renderInput={params => <TextField {...params} label="select or type" />}
/>

code sandbox => https://codesandbox.io/s/winter-cloud-y401t?file=/src/App.js