我有這樣的 Autcomplete mui 組件，它對復選框串列進行過濾。帶有選項的彈出視窗應始終保持打開狀態。我需要做的是僅在用戶輸入超過 3 個字符時觸發過濾。
<Autocomplete
open
multiple
disableCloseOnSelect
options={permissions as Permission[]}
getOptionLabel={(option) => option.name}
disablePortal
renderTags={() => <div>{`${values.permissions?.length} Selected`}</div>}
id="combo-box-demo"
renderInput={(params) => <TextField {...params} label="Permissions" name="search" />}
ListboxProps={{ style: { maxHeight: '240px' } }}
renderOption={({ name }) => (
<Field
style={{ height: '30px' }}
as={FormControlLabel}
name="permissions"
value={name}
label={name}
control={<Checkbox color={'primary'} checked={values.permissions?.includes(name)} />}
/>
)}
/>
這聽起來很簡單，但在深入研究檔案和谷歌搜索之后，我沒有找到任何適合我的特定案例的解決方案（輸入不受控制，彈出視窗應該始終到位）。有人可以幫忙嗎？
uj5u.com熱心網友回復：
您應該filterOptions為此使用自定義邏輯。
filterOptions={(options, state) => {
console.log(options);
if (state.inputValue.length > 2) {
return options.filter((item) =>
String(item.label).toLowerCase().includes(state.inputValue.toLowerCase())
);
}
return options;
}}
看這里的作業
您可以使用任何過濾器邏輯，我只是??在標簽中的任何位置檢查（不區分大小寫的搜索）輸入字串。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/520575.html
上一篇：從嵌套物件中獲取鍵和值