Material UI (MUI) 使用初始預定義值自動完成

Question

我正在嘗試創建一個顯示從 1 到 50 的序列的 MUI 自動完成組件。但是，如果用戶 select 該組件，它最初應該只顯示數字 1、6、10、12、24。如果用戶鍵入 1例如，它應該顯示所有可能的匹配項（1、11、21、31、41 ...）

我試過做這樣的事情，但沒有成功：

const [selectedValue, setSelectedValue] = useState("")

const allNumbers = [1, 2, 3, 4 ... 50]
const initialNumbers = [1, 6, 10, 12, 24]

const actionOnChange = (e) => {
    setSelectedValue(e.target.value)
}

<Autocomplete
    id={id}
    options={selectedValue ? optionsData : optionsFiltered}
    onChange={e => actionOnChange(e)}
    value={selectedValue}

Answer 1

請嘗試將 actionOnChange 更改為此。

    const actionOnChange = (e) => {
    const newArr = allNumbers.filter((item) => item.toString().startsWith(e.target.value.toString()))
    setSelectedValue(newArr);
}