Autocomplete для поиска и автодополнения

Autocomplete — компонент библиотеки MUI (Material-UI) для реализации полей поиска с автодополнением. Он позволяет создавать динамические списки предложений на основе пользовательского ввода и обеспечивает удобный интерфейс для выбора значений. Компонент поддерживает работу с массивами простых данных, объектами, а также интеграцию с асинхронными источниками данных.

Основные свойства Autocomplete

  1. options Массив значений, которые будут отображаться в списке автодополнения. Может быть массивом строк или объектов. При использовании объектов необходимо определить свойства getOptionLabel и renderOption.

    const options = ['Apple', 'Banana', 'Cherry'];
<Autocomplete
  options={options}
  renderInput={(params) => <TextField {...params} label="Выберите фрукт" />}
/>

  2. renderInput Функция, возвращающая компонент TextField или другой инпут для ввода текста. Через параметр params передаются все необходимые свойства для корректной работы Autocomplete.

  3. getOptionLabel Функция, определяющая, как отображать значение в списке и инпуте, особенно актуальна для объектов:

    const options = [{ name: 'Apple', id: 1 }, { name: 'Banana', id: 2 }];
<Autocomplete
  options={options}
  getOptionLabel={(option) => option.name}
  renderInput={(params) => <TextField {...params} label="Фрукты" />}
/>

  4. value и onChange Позволяют управлять выбранным значением и отслеживать изменения. onChange вызывается при выборе элемента или очистке инпута.

    const [value, setValue] = React.useState(null);
<Autocomplete
  options={options}
  value={value}
  onCha nge={(event, newValue) => setValue(newValue)}
  renderInput={(params) => <TextField {...params} label="Фрукты" />}
/>

  5. multiple Позволяет выбрать несколько значений одновременно. В этом случае value становится массивом.

    <Autocomplete
  multiple
  options={options}
  value={value}
  onCha nge={(event, newValue) => setValue(newValue)}
  renderInput={(params) => <TextField {...params} label="Выберите фрукты" />}
/>

  6. freeSolo Разрешает ввод значений, отсутствующих в списке опций.

Асинхронная загрузка данных

Для интеграции с серверными API можно использовать состояние для хранения результатов и эффекты для загрузки данных:

const [options, setOptions] = React.useState([]);
const [inputValue, setInputValue] = React.useState('');

React.useEffect(() => {
  if (inputValue === '') return;
  fetch(`https://api.example.com/search?q=${inputValue}`)
    .then(res => res.json())
    .then(data => setOptions(data.results));
}, [inputValue]);

<Autocomplete
  options={options}
  inputValue={inputValue}
  onInputCha nge={(event, newInputValue) => setInputValue(newInputValue)}
  renderInput={(params) => <TextField {...params} label="Поиск" />}
  getOptionLabel={(option) => option.name}
/>

Кастомизация отображения элементов

  • renderOption — позволяет изменять визуальное представление каждого элемента в списке.
<Autocomplete
  options={options}
  renderOption={(props, option) => (
    <li {...props}>
      <strong>{option.name}</strong> - дополнительная информация
    </li>
  )}
  renderInput={(params) => <TextField {...params} label="Фрукты" />}
/>
  • disableCloseOnSelect — оставляет список открытым при выборе элемента, полезно при множественном выборе.

Фильтрация и сортировка

MUI предоставляет встроенные методы для фильтрации:

  • filterOptions — позволяет переопределить логику фильтрации:
<Autocomplete
  options={options}
  filterOptions={(options, state) =>
    options.filter(option => option.name.toLowerCase().startsWith(state.inputValue.toLowerCase()))
  }
  renderInput={(params) => <TextField {...params} label="Фрукты" />}
/>

  • autoHighlight — автоматически подсвечивает первую подходящую опцию.

  • autoSelect — автоматически выбирает значение при нажатии Enter.

Интеграция с формами

Autocomplete удобно использовать с библиотеками для управления формами, например, Formik или React Hook Form:

<Controller
  name="fruit"
  control={control}
  render={({ field }) => (
    <Autocomplete
      {...field}
      options={options}
      getOptionLabel={(option) => option.name}
      onCha nge={(event, value) => field.onChange(value)}
      renderInput={(params) => <TextField {...params} label="Фрукты" />}
    />
  )}
/>

Стиль и тема

  • sx — позволяет задавать стили напрямую через пропсы.
  • classes и className — для более детальной кастомизации через CSS.
  • theme — интеграция с глобальной темой MUI для изменения цветов, шрифтов и отступов.
<Autocomplete
  options={options}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Фрукты"
      sx={{ '& .MuiInputBase-root': { bgcolor: 'lightyellow' } }}
    />
  )}
/>

Полезные дополнительные свойства

  • clearOnBlur — очищает инпут при потере фокуса.
  • blurOnSelect — снимает фокус после выбора.
  • loading — отображает индикатор загрузки при асинхронных данных.
  • disablePortal — контролирует, будет ли список рендериться в отдельном DOM-узле.

Autocomplete в MUI — гибкий инструмент, подходящий для поиска, фильтрации и выбора данных как из локальных массивов, так и с серверных API, с возможностью полной кастомизации визуального и функционального поведения.

Оглавление