Ввод автозаполнения React MUI

Опубликовано: 24 Февраля, 2023

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

Этот компонент зависит от двух разных вариантов использования или вариантов:

1. Поле со списком: значение, которое будет указано в текстовом поле, должно быть выбрано из предопределенного набора допустимых значений. Эти предопределенные наборы значений обеспечивают точность, при которой ввод всегда действителен.

Синтаксис:

<Autocomplete
   disablePortal
   id="combo-box-demo"
   options={top10Food()}
   sx={{ width: 300 }}
   renderInput={(params) => <TextField {...params} label="Movie" />}
/>

2. Свободное соло: значение в текстовом поле может содержать любое случайное значение, но очень полезно предложить пользователю возможные значения.

Синтаксис:

<Autocomplete
   id="free-solo-demo"
   freeSolo
   options={top10Food().map((option) => option.title)}
   renderInput={(params) => <TextField {...params} label="freeSolo" />}
/>

Создание React-приложения:

Шаг 1 : Создайте приложение React с помощью следующей команды:

npx create-react-app example

Шаг 2: После создания папки проекта, например, перейдите к ней с помощью следующей команды:

cd example

Шаг 3 : Установка MUI, теперь из корневого каталога вашего проекта в терминале выполните следующую команду

npm install @mui/material @emotion/react @emotion/styled

Структура проекта: Это будет выглядеть так.

Пример 1. В этом примере мы увидим поле со списком для автозаполнения, в котором у нас есть список предопределенных значений. Что будет предложено при вводе значения. Мы сможем выбрать только то, которое есть в предопределенном списке значений. Кроме этого, мы не можем выбрать никакие другие значения.

Имя файла: App.js

Javascript

import logo from "./logo.svg";
import "./App.css";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
  
const topFilms = () => [
    { label: "The Shawshank Redemption", year: 1994 },
    { label: "The Godfather", year: 1972 },
    { label: "The Godfather: Part II", year: 1974 },
    { label: "The Dark Knight", year: 2008 },
    { label: "12 Angry Men", year: 1957 },
    { label: "Schindler"s List", year: 1993 },
    { label: "Pulp Fiction", year: 1994 },
    {
        label: "The Lord of the Rings: The Return of the King",
        year: 2003,
    },
    { label: "The Good, the Bad and the Ugly", year: 1966 }
];
function App() {
    return (
        <div className="App">
            <p>The autocomplete example 1 :
                with predefined set of inputs</p>
            <Autocomplete
                disablePortal
                id="combo-box-demo"
                options={topFilms()}
                sx={{ width: 400 }}
                renderInput={(params) =>
                    <TextField {...params} label="Movie" />}
            />
        </div>
    );
}
  
export default App;

Шаг для запуска приложения: Используйте следующую команду для запуска приложения.

npm start

Выход:

Пример 2. В этом примере мы увидим одиночный тип автозаполнения, в котором у нас есть список предопределенных значений предложения. Что будет предложено при вводе значения. Мы сможем выбрать то одно или наше слово оба.

Имя файла: App.js

Javascript

import logo from "./logo.svg";
import "./App.css";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
  
const topFilms = () => [
    { label: "The Shawshank Redemption", year: 1994 },
    { label: "The Godfather", year: 1972 },
    { label: "The Godfather: Part II", year: 1974 },
    { label: "The Dark Knight", year: 2008 },
    { label: "12 Angry Men", year: 1957 },
    { label: "Schindler"s List", year: 1993 },
    { label: "Pulp Fiction", year: 1994 },
    {
        label: "The Lord of the Rings: The Return of the King",
        year: 2003,
    },
    { label: "The Good, the Bad and the Ugly", year: 1966 }
];
function App() {
    return (
        <div className="App">
            <p>The autocomplete example 2 : 
                with suggestion only input</p>
               <Autocomplete
                id="free-solo-demo"
                freeSolo
                options={topFilms().map((option) => option.label)}
                sx={{ width: 400 }}
                renderInput={(params) => <TextField {...params} 
                    label="freeSolo input" />}
            />
        </div>
    );
}
  
export default App;

Выход:

Ссылка: https://mui.com/material-ui/react-autocomplete/

Technical Scripter Picked

Ввод автозаполнения React MUI

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ