如何解决Material UI Autocomplete 无法使用修改后的 TextField
我需要修改作为示例提供的自动完成突出显示以满足我的需要。 (https://material-ui.com/components/autocomplete/#autocomplete)
提供的突出显示示例有边框,因此我使用此链接 (how to remove border in textfield fieldset in material ui) 中的解决方案来修改我的 TextField 并删除它的边框,它可以工作,但在我输入搜索输入时我没有得到自动完成建议。
我也替换了 Icon,最后得到了以下代码:
/* eslint-disable no-use-before-define */
import React from 'react';
import { makeStyles } from "@material-ui/core/styles";
import Autocomplete from '@material-ui/lab/Autocomplete';
import parse from 'autosuggest-highlight/parse';
import match from 'autosuggest-highlight/match';
import { InputAdornment,TextField } from "@material-ui/core";
import SearchIcon from '@material-ui/icons/Search';
const useStyles = makeStyles(() => ({
noBorder: {
border: "none",},}));
export default function Highlights() {
const classes = useStyles()
return (
<Autocomplete
id="highlights-demo"
style={{ width: 300 }}
options={top100Films}
getoptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
// disableunderline={false}
autoFocus
classes={{notchedOutline:classes.input}}
// onChange={handlePhoneNumberChange}
className={classes.textField}
placeholder="Search..."
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),classes:{notchedOutline:classes.noBorder}
}}
/>
// <TextField {...params} label="Highlights" variant="outlined" margin="normal" />
)}
renderOption={(option,{ inputValue }) => {
const matches = match(option.title,inputValue);
const parts = parse(option.title,matches);
return (
<div>
{parts.map((part,index) => (
<span key={index} style={{ fontWeight: part.highlight ? 700 : 400 }}>
{part.text}
</span>
))}
</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 },{ title: "Schindler's List",year: 1993 },{ title: 'Pulp Fiction',{ title: 'The Lord of the Rings: The Return of the King',year: 2003 },{ title: 'The Good,the Bad and the Ugly',year: 1966 },{ title: 'fight Club',year: 1999 },{ title: 'The Lord of the Rings: The Fellowship of the Ring',year: 2001 },{ title: 'Star Wars: Episode V - The Empire Strikes Back',year: 1980 },{ title: 'Forrest Gump',{ title: 'Inception',year: 2010 },{ title: 'The Lord of the Rings: The Two Towers',year: 2002 },{ title: "One Flew Over the Cuckoo's nest",year: 1975 },{ title: 'Goodfellas',year: 1990 },{ title: 'The Matrix',{ title: 'Seven Samurai',year: 1954 },{ title: 'Star Wars: Episode IV - A New Hope',year: 1977 },{ title: 'City of God',{ title: 'Se7en',year: 1995 },{ title: 'The Silence of the Lambs',year: 1991 },{ title: "It's a Wonderful Life",year: 1946 },{ title: 'Life Is Beautiful',year: 1997 },{ title: 'The Usual SUSPECTs',{ title: 'Léon: The Professional',{ title: 'Spirited Away',{ title: 'Saving Private Ryan',year: 1998 },{ title: 'Once Upon a Time in the West',year: 1968 },{ title: 'American History X',{ title: 'Interstellar',year: 2014 },{ title: 'Casablanca',year: 1942 },{ title: 'City Lights',year: 1931 },{ title: 'Psycho',year: 1960 },{ title: 'The Green Mile',{ title: 'The Intouchables',year: 2011 },{ title: 'Modern Times',year: 1936 },{ title: 'Raiders of the Lost Ark',year: 1981 },{ title: 'Rear Window',{ title: 'The Pianist',{ title: 'The Departed',year: 2006 },{ title: 'Terminator 2: Judgment Day',{ title: 'Back to the Future',year: 1985 },{ title: 'Whiplash',{ title: 'Gladiator',year: 2000 },{ title: 'Memento',{ title: 'The Prestige',{ title: 'The Lion King',{ title: 'Apocalypse Now',year: 1979 },{ title: 'Alien',{ title: 'Sunset Boulevard',year: 1950 },{ title: 'Dr. Strangelove or: How I Learned to Stop Worrying and love the Bomb',year: 1964 },{ title: 'The Great Dictator',year: 1940 },{ title: 'Cinema Paradiso',year: 1988 },{ title: 'The Lives of Others',{ title: 'Grave of the Fireflies',{ title: 'Paths of Glory',{ title: 'Django Unchained',year: 2012 },{ title: 'The Shining',{ title: 'WALL·E',{ title: 'American Beauty',{ title: 'The Dark Knight Rises',{ title: 'Princess Mononoke',{ title: 'Aliens',year: 1986 },{ title: 'Oldboy',{ title: 'Once Upon a Time in America',year: 1984 },{ title: 'Witness for the Prosecution',{ title: 'Das Boot',{ title: 'Citizen Kane',year: 1941 },{ title: 'north by northwest',year: 1959 },{ title: 'Vertigo',year: 1958 },{ title: 'Star Wars: Episode VI - Return of the Jedi',year: 1983 },{ title: 'Reservoir Dogs',year: 1992 },{ title: 'Braveheart',{ title: 'M',{ title: 'Requiem for a Dream',{ title: 'Amélie',{ title: 'A Clockwork Orange',year: 1971 },{ title: 'Like Stars on Earth',year: 2007 },{ title: 'Taxi Driver',year: 1976 },{ title: 'LaWrence of arabia',year: 1962 },{ title: 'Double Indemnity',year: 1944 },{ title: 'Eternal Sunshine of the Spotless Mind',year: 2004 },{ title: 'Amadeus',{ title: 'To Kill a Mockingbird',{ title: 'Toy Story 3',{ title: 'Logan',year: 2017 },{ title: 'Full Metal Jacket',year: 1987 },{ title: 'Dangal',year: 2016 },{ title: 'The Sting',year: 1973 },{ title: '2001: A Space Odyssey',{ title: "Singin' in the Rain",year: 1952 },{ title: 'Toy Story',{ title: 'Bicycle Thieves',year: 1948 },{ title: 'The Kid',year: 1921 },{ title: 'InglourIoUs Basterds',year: 2009 },{ title: 'Snatch',{ title: '3 Idiots',{ title: 'Monty Python and the Holy Grail',];
解决方法
为了使自动完成工作,您还需要将 InputProps
传递给自定义文本字段。
所以我会像这样改变你的 renderInput
函数:
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
// disableUnderline={false}
autoFocus
classes={{notchedOutline:classes.input}}
// onChange={handlePhoneNumberChange}
className={classes.textField}
placeholder="Search..."
InputProps={{
...params.InputProps,// this is new
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),classes:{notchedOutline:classes.noBorder}
}}
/>
// <TextField {...params} label="Highlights" variant="outlined" margin="normal" />
)}
这是一个demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。