Javascript 如何使用“材质ui自动完成”使用“从列表中选择”键筛选表并手动输入值

我正在尝试创建类似于AWS Dashboard的过滤器，在这里我们可以选择过滤器键，如

实例状态

，然后它在输入上呈现键，允许用户输入值，然后搜索它

我正在尝试使用材质ui

Autocomplete

和

multiple

创建类似的功能。当我选择选项时，它会显示列表，创建芯片并添加到输入中，但我不知道如何修改它以获得我想要的功能

代码：

option}
选项={columns}
过滤器选择选项
大小={“小”}
style={{flexGrow:2}
renderInput={（参数）=>(
)}
/>

注意：下面的示例不是完整的解决方案。这将有助于开始/帮助您了解自动完成材质ui的使用

这是一个与您的问题类似的示例。

Material ui支持开发人员在其提供的组件之上进行自定义。 我也遇到过类似的问题。下面是我如何解决这个问题的

为了定制您的自动完成材质，ui提供了一套我们可以覆盖的道具。

请查找代码示例

在上面的示例中，输入值可以通过文本字段组件的onChange进行更改/设置/更新。
类似地，在从下拉列表中选择值时，您可以使用onChange of AutoCompolete组件

Q） 如何填充文本框以及选定的筛选器？
A） 在上面的示例中，我正在更新inputValue

Q） 选择过滤器后如何显示选项？
A） 在上面的示例中，我使用了由Autocomplete提供的过滤器选项（Autocomplete prop）

---

当链接到您自己的外部材料（已编辑）时，请明确指示，请参阅。实际上键

实例状态

也来自同一个下拉菜单，因此我想做一些事情，比如第一次单击以获取列名，然后再次单击以显示可能的选择值。

        <Autocomplete
            multiple
            getOptionLabel={(option) => option}
            options={columns}
            filterSelectedOptions
            size={"small"}
            style={{ flexGrow: 2 }}
            renderInput={(params) => (
                <TextField
                    {...params}
                    variant={"outlined"}
                    placeholder={"Filter Items"}
                />
            )}
        />

  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));
    }
  };

  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;
  };