¿Cómo crear un cuadro de búsqueda dinámico en ReactJS?

El cuadro de búsqueda dinámica es una barra de búsqueda con un campo de texto para tomar la entrada del usuario y luego realizar alguna operación en la entrada del usuario para mostrarle los resultados dinámicos basados ​​en su entrada. Las llamadas a la API se realizan cada vez que un usuario comienza a escribir para mostrarle las opciones dinámicas. Por ejemplo, el cuadro de búsqueda de Youtube, el cuadro de búsqueda de Google, etc. disponibles utilizando 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, { useState } from 'react'
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
  
const App = () => {
  
  const [myOptions, setMyOptions] = useState([])
  
  const getDataFromAPI = () => {
    console.log("Options Fetched from API")
  
    fetch('http://dummy.restapiexample.com/api/v1/employees').then((response) => {
      return response.json()
    }).then((res) => {
      console.log(res.data)
      for (var i = 0; i < res.data.length; i++) {
        myOptions.push(res.data[i].employee_name)
      }
      setMyOptions(myOptions)
    })
  }
  
  return (
    <div style={{ marginLeft: '40%', marginTop: '60px' }}>
      <h3>Greetings from GeeksforGeeks!</h3>
      <Autocomplete
        style={{ width: 500 }}
        freeSolo
        autoComplete
        autoHighlight
        options={myOptions}
        renderInput={(params) => (
          <TextField {...params}
            onChange={getDataFromAPI}
            variant="outlined"
            label="Search Box"
          />
        )}
      />
    </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:

En el ejemplo anterior, puede ver que cada vez que el usuario escribe algo, se realiza una llamada a la API para obtener las opciones, así es como podemos mostrar opciones dinámicas en el cuadro de búsqueda como YouTube, Google, etc.