Блог

На веб-сайте Material UI есть много примеров того, как настроить AutoComplete компонент, но, как ни странно, он не дает примера наиболее распространенного варианта использования… поисковый ввод в заголовке страницы.

Они явно знают, как это сделать, потому что тот, который находится на самом веб-сайте Material UI, — это именно то, что я хочу. Перейдите на любую страницу на https://material-ui.com / и область заголовка содержит поле поиска, которое содержит значок поиска, имеет разумный размер для заголовка, расширяется при фокусировке и содержит белый текст (поскольку заголовок имеет сплошной цвет). К сожалению, проверка элемента не очень помогла.

Я довольно близко подобрался после нескольких часов игры, но мое окно поиска по-прежнему слишком велико, выглядит не так хорошо, как на веб-сайте Material UI, и упорно отказывается отображать что-либо, кроме черного текста.

Это код, который у меня есть

 import React, { useState, useEffect } from 'react';
import { TextField, makeStyles } from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete';
import SearchIcon from '@material-ui/icons/Search';
import clsx from 'clsx';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    alignItems: 'center',
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    paddingTop: theme.spacing(2),
    width: theme.spacing(7),
    pointerEvents: 'none',
    display: 'inline-block',
  },
  inputText: {
    display: 'inline-block',
    color: 'white',
    transition: theme.transitions.create('width'),
    [theme.breakpoints.up('md')]: {
      marginLeft: theme.spacing(1),
      width: '12ch',
      'amp;:focus': {
        width: '20ch',
      },
    },
  },
}));

export const SearchBox = ({ className }) => {
  const classes = useStyles();
  const [searchResult, setSearchResult] = useState([]);

  useEffect(() => {
    setSearchResult([
      { id: '01', type: 'View', matchingText: ' Hello world 1' },
      { id: '02', type: 'Node', matchingText: ' Hello world 2' },
      { id: '03', type: 'View', matchingText: ' Hello world 3' },
      { id: '04', type: 'Node', matchingText: ' Hello world 4' },
    ]);
  }, []);

  return (
    <div className={clsx(classes.root, className)}>
      <Autocomplete
        classes={{ root: classes.autocompleteRoot }}
        freeSolo
        disableClearables
        options={searchResult}
        groupBy={(option) => option.type}
        getOptionLabel={(option) => option.matchingText}
        renderInput={(params) => (
          <>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <TextField
              {...params}
              label="Search"
              classes={{ root: classes.inputText }}
              margin="normal"
              variant="outlined"
              InputProps={{ ...params.InputProps, type: 'search' }}
            />
          </>
        )}
      />
    </div>
  );
};

export default SearchBox;