Ввод автозаполнения React MUI
В 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/