如何使用material从列表中选择键并手动输入值来筛选表
如何使用material从列表中选择键并手动输入值来筛选表
提问于 2021-05-28 03:54:25
我正在尝试创建类似于AWS仪表板的过滤器，在这里我们可以选择filter键，比如instance state，然后它在输入上呈现键，允许用户输入值，然后搜索它。
我试图创建类似的功能使用材料-ui Autocomplete与multiple。它显示了列表和创建芯片，并添加到输入，因为我选择选项，但我不知道如何修改，以得到我希望它做什么。
代码：
<Autocomplete
multiple
getOptionLabel={(option) => option}
options={columns}
filterSelectedOptions
size={"small"}
style={{ flexGrow: 2 }}
renderInput={(params) => (
<TextField
{...params}
variant={"outlined"}
placeholder={"Filter Items"}
/>
)}
/>回答 1
Stack Overflow用户
发布于 2021-05-31 18:02:08
注意事项：下面的示例不是完整的解决方案。它将有助于开始/帮助您理解AutoComplete材料-ui的使用。
这是一个与您的问题类似的示例示例。单击此处
Material支持开发人员在其提供的组件之上进行自定义。我也遇到过类似的问题。这里是如何，我能够解决问题。
要自定义您的自动完成材料-ui提供了一组道具，我们可以重写。
请查找代码示例这里。
在上面的示例中，可以使用onChange of TextField组件修改/设置/更新输入值。
类似地，在选择值形式时，下拉列表可以使用onChange的AutoCompolete组件。
如何填充选定的文本框和筛选器？ ( A)在上面的示例中，我正在更新inputValue。
const handleChange = (event) => {
setChecked(event.target.checked);
if (event.target.checked) {
setFilterValue([...new Set([...filterValue, event.target.name])]);
} else {
setFilterValue(filterValue.filter((fv) => fv !== event.target.name));
}
};如何在选择过滤器后显示选项？ (A)在上面的例子中，我使用了由Autocomplete提供的filterOptions(自动完成支柱)。
const filterOptions = (options) => {
const inputOnFilter =
inputValue.indexOf(":") > 0
? inputValue.slice(inputValue.lastIndexOf(":") + 1, inputValue.length)
: inputValue;
if (inputOnFilter)
return options.filter((option) => option?.includes(inputOnFilter));
return options;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67732702
复制相关文章
相似问题
腾讯云开发者
