¿Cómo agregar un filtro personalizado en el cuadro de búsqueda en ReactJS?

El filtro personalizado significa agregar nuestro propio inicio de sesión comercial para filtrar las opciones que se muestran en el cuadro de búsqueda o en cualquier menú desplegable. Material UI for React tiene este componente disponible para nosotros y es muy fácil de integrar. Podemos crear nuestro propio filtro personalizado para opciones en ReactJS 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 from 'react'
import TextField from '@material-ui/core/TextField';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
 
const App = () => {
 
  const filterOptions = createFilterOptions({
    matchFrom: 'start',
    stringify: option => option,
  });
 
  // Sample options for search box
  const myOptions = ['One Number', 'Two Number', 'Five Number',
    'This is a sample text', 'Dummy text', 'Dropdown option teet',
    'Hello text', 'Welcome to text field'];
 
  return (
    <div style={{ marginLeft: '40%', marginTop: '60px' }}>
      <h3>Greetings from GeeksforGeeks!</h3>
      <Autocomplete
        style={{ width: 500 }}
        freeSolo
        filterOptions={filterOptions}
        options={myOptions}
        renderInput={(params) => (
          <TextField {...params}
            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:

El siguiente habría sido el resultado sin agregar nuestra función de filtro personalizado: