将筹码/标签移出MUI中的自动完成框 [英] Moving the chips/tags outside Autocomplete box in MUI

问题描述

我正在使用MUIAutocomplete组件，并尝试确定是否可以将芯片/标签移出输入框。这有可能吗？我更希望薯条就列在盒子下面。这样，文本框可以仅用于用户输入，而不是同时显示芯片/标签&；用户输入。

我试过玩一个基本的演示，但没有任何运气。我将其清除回默认状态，以防这里的一些用户对此有经验。示例的起点可以是以下沙箱

https://codesandbox.io/s/material-demo-forked-7vroo?file=/demo.js

推荐答案

您可以通过在Autocomplete中禁用标记呈现并在Autocomplete下面添加您自己的Chip列表来完成此操作。

const [value, setValue] = useState([]);
const onDelete = (title) => () => {
  setValue((value) => value.filter((v) => v.title !== title));
};

return (
  <Box sx={{ width: 500 }}>
    <Autocomplete
      multiple
      options={top100Films}
      defaultValue={[top100Films[13]]}
      getOptionLabel={(option) => option.title}
      value={value}
      onChange={(e, newValue) => setValue(newValue)}
      renderTags={() => null}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" placeholder="Favorites" />
      )}
    />
    <Box
      mt={3}
      sx={{
        '& > :not(:last-child)': { marginRight: 1 },
        '& > *': { marginBottom: 1 },
      }}
    >
      {value.map((v) => (
        <Chip key={v.title} label={v.title} onDelete={onDelete(v.title)} />
      ))}
    </Box>
  </Box>
);

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
]

实时演示

V5

V4

这篇关于将筹码/标签移出MUI中的自动完成框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！