javascript - 更新 Material UI 的多值输入组件 React 的搜索功能
问题描述
React 的新手并使用 Material UI 的多值组件来允许用户从下拉列表中选择多个选项 ( https://material-ui.com/components/autocomplete/#multiple-values )。我想更新他们的实现,以便我也可以通过年份搜索以返回结果,因此也可以通过搜索“1972”来找到“教父”。是否有人对实施此解决方案的好起点或有用的阅读有任何指示?真的很感激!
/* eslint-disable no-use-before-define */
import React from "react";
import Chip from "@material-ui/core/Chip";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
root: {
width: 500,
"& > * + *": {
marginTop: theme.spacing(3)
}
}
}));
export default function Tags() {
const classes = useStyles();
return (
<div className={classes.root}>
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="filterSelectedOptions"
placeholder="Favorites"
/>
)}
/>
</div>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "The Godfather: Part II", year: 1974 },
{ title: "The Dark Knight", year: 2008 },
{ title: "12 Angry Men", year: 1957 }
];
解决方案
推荐阅读
- haskell - 使用 case 表达式 Haskell 进行递归
- javascript - 单击提交后,如何重定向到 js 组件并通过 php 向 db 发送信息?
- python - Python:如何使用函数和 Tkinter GUI 设置循环?
- python - Python(Pyspark)嵌套列表reduceByKey,Python列表追加创建嵌套列表
- python - LSTM model doesn't predict values higher than certain value (not same value all the time)
- python - Reshaping arrays using Numpy.Reshape
- c - Address operator on big endian system
- c - Cant edit values with functions
- c++ - 期间发生内部错误:“从 'myserver”更新 SonarLint 绑定数据。org/sonar/api/batch/传感器 - Eclipse(C++)
- javascript - 导航菜单打开时禁用导航切换的悬停效果