Cómo crear un componente de autocompletado en React

Introducción

La función de autocompletar es una función en la que un campo de entrada sugiere una palabra en función de la entrada del usuario. Esto ayuda a mejorar la experiencia del usuario en su aplicación, como en los casos en los que es necesaria una búsqueda.

En este artículo, examinará cómo crear un componente de autocompletado en React. Trabajará con una lista fija de sugerencias, vinculará eventos, comprenderá los códigos del teclado y operará la gestión del estado.

Prerrequisitos

Para completar este tutorial, necesitará lo siguiente:

• Se requiere conocimiento de React. Para obtener más información sobre React, consulta la serie Cómo codificar en React .

Paso 1: Construir Autocompleteel componente

El Autocompletecomponente es donde crearás la funcionalidad de la función de autocompletar.

Crea un Autocomplete.jsarchivo, importa React y crea una instancia de una Autocompleteclase:

Autocompletar.js

import React, { Component, Fragment } from "react";import './styles.css'class Autocomplete extends Component {  constructor(props) {    super(props);    this.state = {      activeSuggestion: 0,      filteredSuggestions: [],      showSuggestions: false,      userInput: ""    };  }

En su estado, la activeSuggestionpropiedad define el índice de una sugerencia seleccionada. La propiedad filteredSuggestions, establecida en una matriz vacía, coincide con la entrada del usuario. La showSuggestionspropiedad determinará si aparece o no la lista de sugerencias y userInputse asigna a sí misma una cadena vacía para aceptar una palabra de la entrada de un usuario.

Con su clase iniciada y el estado establecido, veamos los métodos a aplicar en el componente.

En su Autocomplete.jsarchivo, defina un onChangemétodo y actualice su estado:

Autocompletar.js

  onChange = e = {    const { suggestions } = this.props;    const userInput = e.currentTarget.value;    const filteredSuggestions = suggestions.filter(      suggestion =        suggestion.toLowerCase().indexOf(userInput.toLowerCase())  -1    );    this.setState({      activeSuggestion: 0,      filteredSuggestions,      showSuggestions: true,      userInput: e.currentTarget.value    });  };

El método onChangese activará cuando el usuario cambie el valor de entrada. En cada cambio, el método filtrará la lista de sugerencias y devolverá sugerencias que no contengan la entrada del usuario. Una vez que se ejecute el filtro, el .setState()método revisará userInputla propiedad de su estado para que contenga un valor, establecerá su showSuggestionsvalor booleano para permitir que se muestren las sugerencias y restablecerá la activeSuggestionpropiedad en cada llamada al método.

El onClickevento se invocará cuando el usuario haga clic en una sugerencia. En su Autocomplete.jsarchivo, declare un onClickmétodo e implemente un .setState()método:

Autocompletar.js

  onClick = e = {    this.setState({      activeSuggestion: 0,      filteredSuggestions: [],      showSuggestions: false,      userInput: e.currentTarget.innerText    });  };

El .setState()método actualizará la entrada del usuario y restablecerá las propiedades de su estado.

El onKeyDownmétodo se activará cuando el usuario presione una tecla. En el Autocomplete.jsarchivo, declare un onKeyDownmétodo y establezca varias condiciones:

Autocompletar.js

  onKeyDown = e = {    const { activeSuggestion, filteredSuggestions } = this.state;    if (e.keyCode === 13) {      this.setState({        activeSuggestion: 0,        showSuggestions: false,        userInput: filteredSuggestions[activeSuggestion]      });    } else if (e.keyCode === 38) {      if (activeSuggestion === 0) {        return;      }      this.setState({ activeSuggestion: activeSuggestion - 1 });    }    // User pressed the down arrow, increment the index    else if (e.keyCode === 40) {      if (activeSuggestion - 1 === filteredSuggestions.length) {        return;      }      this.setState({ activeSuggestion: activeSuggestion + 1 });    }  };

Una vez que haya almacenado sus propiedades activeSuggestiony filteredSuggestionen un objeto deconstruido, los condicionales verificarán si la tecla que el usuario presionó coincide con los códigos de tecla. El primer condicional verificará si el código de tecla coincide con 13, la tecla Enter, y ejecutará el .setState()método para actualizar la userInputpropiedad y cerrar la lista de sugerencias. Si el usuario presionó la flecha hacia arriba, el código de tecla 38, el condicional disminuirá el índice de la activeSuggestionpropiedad y no devolverá nada si el índice es cero. Si el usuario presionó la flecha hacia abajo, el código de tecla 40, el condicional incrementará el índice en la activeSuggestionpropiedad y no devolverá nada si el índice coincide con la longitud de la filteredSuggestionspropiedad.

Ahora que sus métodos están completos, pasemos a aplicar su rendermétodo de ciclo de vida.

En su Autocomplete.jsarchivo, establezca una render()declaración y defina sus métodos y estado en un objeto deconstruido:

Autocompletar.js

  render() {    const {      onChange,      onClick,      onKeyDown,      state: {        activeSuggestion,        filteredSuggestions,        showSuggestions,        userInput      }    } = this;    let suggestionsListComponent;

La variable suggestionsListComponentno tiene un valor definido, ya que lo asignarás en los condicionales siguientes:

Autocompletar.js

    if (showSuggestions  userInput) {      if (filteredSuggestions.length) {        suggestionsListComponent = (          ul            {filteredSuggestions.map((suggestion, index) = {              let className;              // Flag the active suggestion with a class              if (index === activeSuggestion) {                className = "suggestion-active";              }              return (                li className={className} key={suggestion} onClick={onClick}                  {suggestion}                /li              );            })}          /ul        );      } else {        suggestionsListComponent = (          div            emNo suggestions available./em          /div        );      }    }

La primera condición comprobará si los valores de las propiedades showSuggestionsy userInputexisten, mientras que la siguiente condición comprobará la longitud de la filteredSuggestionspropiedad. Si se cumplen las condiciones, la suggestionsListComponentvariable se asigna a sí misma el valor de iterar a través de la filteredSuggestionspropiedad y marca una sugerencia activa con un nombre de clase si el índice coincide con el valor de la activeSuggestionpropiedad. La suggestionsListComponentvariable devolverá una lista ordenada de las sugerencias tras la ejecución del onClickmétodo y asignará a cada sugerencia un nombre de clase. Si los valores de las propiedades showSuggestionsy userInputno existen, aparecerá un texto para indicar que no hay sugerencias disponibles.

Si el usuario no cumple con las condiciones enumeradas, el render()método de ciclo de vida devolverá un React Fragmentpara aplicar el campo de entrada e invocar los métodos sin agregar nodos adicionales al modelo de objetos del documento:

Autocompletar.js

    return (      Fragment        input          type="text"          onChange={onChange}          onKeyDown={onKeyDown}          value={userInput}        /        {suggestionsListComponent}      /Fragment    );  }}export default Autocomplete;

Ahora que ha desarrollado su Autocompletecomponente, exporte el archivo y combine su funcionalidad en otro componente.

Paso 2: Unirse a su proyecto React

El Appcomponente es donde mostrará la funcionalidad de su Autocompletecomponente. En su index.jsarchivo, declare un Appcomponente e importe su Autocompletecomponente:

índice.js

import React from "react";import Autocomplete from "./Autocomplete";function App() {  return (    div      h1React Autocomplete Demo/h1      h2Start typing and experience the autocomplete wizardry!/h2      Autocomplete suggestions={"Oranges", "Apples", "Banana", "Kiwi", "Mango"]}/    /div  );}export default App

La declaración de retorno de su Appcomponente acepta el Autocompletecomponente con la lista fija de sugerencias.

Paso 3: Dar estilo al Autocompletecomponente

Para finalizar su Autocompletecomponente, agregue estilo con CSS para posicionar y colorear su aplicación y campo de entrada.

Crea un styles.cssarchivo y establece reglas CSS para dar forma a tu Autocompletecomponente:

estilos.css

body {  font-family: sans-serif;}input {  border: 1px solid #999;  padding: 0.5rem;  width: 300px;}.no-suggestions {  color: #999;  padding: 0.5rem;}.suggestions {  border: 1px solid #999;  border-top-width: 0;  list-style: none;  margin-top: 0;  max-height: 143px;  overflow-y: auto;  padding-left: 0;  width: calc(300px + 1rem);}.suggestions li {  padding: 0.5rem;}.suggestion-active,.suggestions li:hover {  background-color: #008f68;  color: #fae042;  cursor: pointer;  font-weight: 700;}.suggestions li:not(:last-of-type) {  border-bottom: 1px solid #999;}

Con tus reglas CSS construidas, importa el archivo en tu Autocomplete.jsarchivo para aplicar tus estilos.

Conclusión

React ofrece medidas para construir la funcionalidad de autocompletar disponible en un componente con métodos integrados y personalizados para interactuar con el usuario.

Descubra cómo funciona el componente Autocompletar en CodeSandbox .