[Duda] Autocompletado

¡Hola, Edson!

Para obtener sugerencias de autocompletado en React, puedes utilizar la librería React Autosuggest. Esta librería permite crear un campo de entrada que sugiere opciones al usuario mientras escribe.

Aquí te dejo un ejemplo básico de cómo implementar React Autosuggest:

import Autosuggest from 'react-autosuggest';

// Opciones para sugerir al usuario
const options = [
  { name: 'Manzana' },
  { name: 'Banana' },
  { name: 'Naranja' },
  { name: 'Pera' },
];

// Función para obtener sugerencias
const getSuggestions = (value) => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0 ? [] : options.filter(option =>
    option.name.toLowerCase().slice(0, inputLength) === inputValue
  );
};

// Renderiza cada sugerencia
const renderSuggestion = (suggestion) => (
  <div>
    {suggestion.name}
  </div>
);

// Componente Autosuggest
const AutoSuggestComponent = () => {
  const [value, setValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const onSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(value));
  };

  const onSuggestionsClearRequested = () => {
    setSuggestions([]);
  };

  const onChange = (event, { newValue }) => {
    setValue(newValue);
  };

  const inputProps = {
    placeholder: 'Escribe una fruta',
    value,
    onChange,
  };

  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
      onSuggestionsClearRequested={onSuggestionsClearRequested}
      getSuggestionValue={(suggestion) => suggestion.name}
      renderSuggestion={renderSuggestion}
      inputProps={inputProps}
    />
  );
};

En este ejemplo, la variable options contiene las opciones que se sugieren al usuario. La función getSuggestions filtra estas opciones según lo que el usuario haya escrito en el campo de entrada. La función renderSuggestion define cómo se renderiza cada sugerencia.

El componente AutoSuggestComponent es el que se encarga de renderizar el campo de entrada con las sugerencias. Este componente utiliza el hook useState para manejar el estado del valor del campo de entrada y las sugerencias.

Espero que esto te ayude a implementar el autocompletado en tu proyecto de React. ¡Buenos estudios!