Si desea hacerlo rápido, puede obtener una biblioteca gráfica como Material UI: https://mui.com/

De esta manera, puede usar componentes creados previamente como este que tiene autocompletar: https://mui.com/components/autocomplete/#search-input

No dice muchos detalles sobre su caso, pero para usarlo, debe configurar una ruta que le devuelva una lista de la entrada investigada cada vez que haya un cambio en dicha entrada (configure la función onChange de la sección de entrada solicitar la lista cada vez que haya un cambio).

Para agregar una búsqueda:

1. Renderice su componente de barra de búsqueda en la aplicación
2. Agrega tus elementos HTML
3. Agregar una lista de publicaciones
4. Filtre la lista según su consulta de búsqueda
5. Agregar búsqueda inmediata o "buscar mientras escribe"
6. Agregar navegación SPA con React Router
7. "Buscar mientras escribe", problemas de navegación y accesibilidad del SPA
8. Probando su componente con React Testing Library
9. Conclusión

Si desea obtener información más precisa, puede ver y comprender el material relacionado en la siguiente URL. https://www.emgoto.com/react-search-bar/

Saludos.

Usando el arranque:

 import React, { useState } from "react"; import { useRouter } from "next/router"; const Search = () => { const [location, setLocation] = useState(""); const [guests, setGuests] = useState(""); const [category, setCategory] = useState(""); const router = useRouter(); const submitHandler = (e) => { e.preventDefault(); if (location.trim()) { router.push( // this will push it to home page with query params // in home pag, based on these query params, you should be fetching data `/?location=${location}&guests=${guests}&category=${category}` ); } else { router.push("/"); } }; return ( // using bootstrap classes <div className="container container-fluid"> <div className="row wrapper"> <div className="col-10 col-lg-5"> <form className="shadow-lg" onSubmit={submitHandler}> <h2 className="mb-3">Search Rooms</h2> <div className="form-group"> <label htmlFor="location_field">Location</label> <input type="text" className="form-control" id="location_field" placeholder="new york" value={location} onChange={(e) => setLocation(e.target.value)} /> </div> <div className="form-group"> <label htmlFor="guest_field">No. of Guests</label> {/* The <select> element is used to create a drop-down list. */} <select className="form-control" id="guest_field" value={guests} onChange={(e) => setGuests(e.target.value)} > {/* upto 6 guests */} {[1, 2, 3, 4, 5, 6].map((num) => ( // The <option> tags inside the <select> element define the available options in the drop-down list. <option key={num} value={num}> {num} </option> ))} </select> </div> <div className="form-group"> <label htmlFor="room_type_field">Room Type</label> <select className="form-control" id="room_type_field" value={category} onChange={(e) => setCategory(e.target.value)} > {["King", "Single", "Twins"].map((category) => ( <option key={category} value={category}> {category} </option> ))} </select> </div> <button type="submit" className="btn btn-block py-2"> Search </button> </form> </div> </div> </div> ); }; export default Search;