时间戳

首页 > 解决方案 > 是否有 Material-UI 组件可以像在 stackoverflow 中一样搜索/选择标签？

reactjs - 是否有 Material-UI 组件可以像在 stackoverflow 中一样搜索/选择标签？

问题描述

我正在寻找类似的东西在 ReactJS/Material-UI 中实现。有任何现有的组件或库吗？

在此处输入图像描述

标签： reactjsmaterial-ui

解决方案

您可以Autocomplete通过覆盖作为下拉容器的 的 组件来执行此操作，并使用 unit 将 CSS 网格设置为显示 3 个等宽ListboxProps的列：Listboxfr

<Autocomplete
  ListboxProps={{
    style: {
      display: "grid",
      gridTemplateColumns: "1fr 1fr 1fr",
      maxHeight: "initial",
    }
  }}

现在假设该选项具有以下类型：

type TagOption = {
  tag: string;
  views: number;
  description: string;
};

在 Stackoverflow 下拉列表中，最多只有 6 个选项，因此我们需要限制显示的选项数量Listbox：

import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";

const _filterOptions = createFilterOptions<TagOption>();
const filterOption = (props, state) => {
  const results = _filterOptions(props, state);

  return results.slice(0, 6);
};

<Autocomplete filterOptions={filterOption}

我们还想为每个网格项创建一个自定义选项组件。这是一个最小的示例，没有太多样式可以帮助您入门：

function OptionItem({ option, ...other }) {
  return (
    <li
      {...other}
      style={{
        display: "block"
      }}
    >
      <div>
        <Chip label={option.tag} />
        {option.views}
      </div>
      <div>{option.description}</div>
    </li>
  );
}

renderOption={(props, option, { selected }) => (
  <OptionItem {...props} option={option} />
)}

最后设置isOptionEqualToValueandgetOptionLabel以确保选项被正确过滤，并且输入在选择时显示正确的标签：

isOptionEqualToValue={(option, value) => option.tag === value.tag}
getOptionLabel={(option) => option.tag}

现场演示（来源）

推荐阅读