Autocompletar las opciones de texto libre en ReactJS

Completar automáticamente el texto libre de las opciones significa completar automáticamente el valor del texto libre con el valor de la opción. Mejora la experiencia del usuario ya que el usuario no necesita escribir el valor completo. disponible autocompletar las opciones de texto libre de Dropdown usando el siguiente enfoque.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Paso 3: después de crear la aplicación ReactJS, instale los módulos material-ui usando el siguiente comando:

npm install @material-ui/core
npm install @material-ui/lab

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
  
const App = () => {
  
  // Sample options for dropdown
  const myOptions = ['One Number', 'Two Number',
    'Three Number', 'Four Number', 'Five Number'];
  
  return (
    <div style={{ marginLeft: '40%', marginTop: '60px' }}>
      <h3>Greetings from GeeksforGeeks!</h3>
      <Autocomplete
        style={{ width: 500 }}
        autoComplete
        options={myOptions}
        renderInput={(params) => (
          <TextField {...params}
            variant="outlined"
            label="AutoComplete Demo"
          />
        )}
      />
    </div>
  );
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ahora escriba cualquier texto libre en el menú desplegable y cuando aparezcan las opciones, simplemente haga clic en la flecha hacia abajo, el texto libre se completará automáticamente con el valor de la opción.