O preenchimento automático é um recurso que sugere palavras ou frases que completam a entrada inicial de um usuário. Neste artigo, construiremos um componente de preenchimento automático do zero no React.

Para uma melhor compreensão deste tutorial, você deve estar familiarizado com JavaScript e React e deve ter Node.js e npm instalados em sua máquina.

Você pode ver o código completo deste tutorial e uma versão ao vivo em CodeSandbox . Vamos começar!

Começar

Vamos começar criando um novo projeto React usando npx. Usaremos autocomplete-app como o nome do projeto para nosso exemplo:

npx create-react-app autocomplete-app

Agora, vamos navegar até o diretório do projeto e iniciar o servidor de desenvolvimento. O comando abaixo abre uma guia do navegador, renderizando o aplicativo padrão:

cd autocomplete-app && yarn start

Construindo um componente React autocomplete

Dentro de sua pasta src, crie um novo arquivo chamado Autocomplete.js. Vamos criar um componente funcional que leva em um objeto chamado sugestões. O componente funcional retornará uma tag de botão com as seguintes propriedades desestruturadas:

import {useState} from”react”; const AutoComplete=({sugestões})=> {return (<> ); }; exportar AutoCompletar padrão;

O código acima cria um componente de preenchimento automático. Dentro, renderizamos um componente de entrada, que recebe um tipo de entrada de texto. Vamos criar alguns métodos para aplicar em nosso componente.

Definindo métodos

Vamos definir um método onChange dentro de nosso componente autocomplete. Primeiro, precisamos definir estados para sugestões de filtragem, mostrando sugestões ativas e recebendo entradas de um usuário:

const [FilterSuggestions, setFilteredSuggestions]=useState ([]); const [activeSuggestionIndex, setActiveSuggestionIndex]=useState (0); const [showSuggestions, setShowSuggestions]=useState (false); const [input, setInput]=useState (“”);

Agora, vamos criar o método onChange:

const onChange=(e)=> {const userInput=e.target.value;//Filtre nossas sugestões que não contêm a entrada do usuário const unLinked=responses.filter ((sugestão)=> sugestão.toLowerCase (). IndexOf (userInput.toLowerCase ())>-1); setInput (e.target.value); setFilteredSuggestions (unLinked); setActiveSuggestionIndex (0); setShowSuggestions (true); };

Sempre que um usuário altera o valor de entrada, o método onChange dispara, filtrando uma lista de sugestões e retornando aquelas que não contêm a entrada do usuário.

Usamos React’s setState Hook para definir uma propriedade do usuário para conter um valor. Também definimos sugestões com o estado setShowSuggestions, que exibe nossa lista para o usuário. Cada vez que a entrada muda, setActiveSuggestions exibe uma nova lista de sugestões para o usuário.

Adicionando uma sugestão

Vamos adicionar um evento onClick em nosso arquivo Autocomplete.js para adicionar uma sugestão:

const onClick=(e)=> {setFilteredSuggestions ([]); setInput (e.target.innerText); setActiveSuggestionIndex (0); setShowSuggestions (false); };

No bloco de código acima, criamos um evento onClick que será emitido quando um usuário clicar em uma sugestão. Usamos o gancho setState do React para atualizar a entrada do usuário e redefinir nosso estado atual.

Selecionando entre as sugestões de preenchimento automático

Um recurso importante para adicionar ao nosso aplicativo é um método onKeyDown. Quando um usuário recebe duas ou mais sugestões, o usuário pode usar o botão keyDown para selecionar qualquer uma das sugestões de preenchimento automático.

A primeira condição verifica se a entrada do usuário corresponde ao keyCode 13, a tecla enter. Em caso afirmativo, ele executa o método setInput para adicionar a entrada do usuário e fechar a lista de sugestões.

Se o usuário pressionar a tecla de seta para cima, que tem keyCode 38, a segunda condição diminuirá o índice. Se o índice for 0, a segunda condição não retornará nada na proposta activeSuggestion.

Se o usuário inserir keyCode 40, a condição aumentará o índice na proposta setActiveSuggestion. Se o índice corresponder ao comprimento de filterSuggestions, ele não retornará nada.

Crie um SuggestionsListComponent

Para nosso último método, vamos criar um SuggestionsListComponent, que sinalizará sugestões ativas com classes. que podemos usá-los em nosso aplicativo. Também adicionaremos um alerta para quando um usuário inserir uma palavra que não esteja em nossa SuggestionsList:

const SuggestionsListComponent=()=> {return FilterSuggestions.length? (

{filterSuggestions.map ((sugestão, índice)=> {let className;//Sinaliza a sugestão ativa com uma classe if (index===activeSuggestionIndex) {className=”sugestão-ativa”;} return (
• {sugestão}

);})}

): (

); };

O método SuggestionsListComponent verifica se os adereços que o usuário inseriu têm algum valor. Se os valores existirem, o método SuggestionsListComponent atribuirá um valor que percorre a propriedade filterSuggestions.

Se o índice corresponder ao valor na propriedade activeSuggestion, ele adiciona uma classe ativa a uma sugestão ativa. Quando o método onClick é usado, o método suggestionListComponent retornará uma lista ordenada das sugestões e atribuirá um nome de classe a uma sugestão.

Se os valores em showSuggestions e userInput não existirem em nosso banco de dados, o usuário recebe um texto dizendo que não há sugestões.

Inserindo o texto do usuário

Vamos terminar nosso componente de preenchimento automático criando um campo de entrada para um usuário inserir texto se as condições listadas em SuggestListComponent não forem foi atendido:

return (<> {showSuggestions && input && } ) ; }; exportar AutoCompletar padrão;

Finalmente, vamos navegar até o arquivo App.js dentro do diretório do nosso projeto e adicionar o trecho de código abaixo. Vamos criar um componente de aplicativo que leva em nosso componente de preenchimento automático e uma lista de sugestões em uma matriz:

import React from”react”; importar Autocomplete de”./Autocomplete”; import”./styles.css”; const App=()=> {return (

); }; exportar aplicativo padrão;

Agora, vamos estilizar nosso aplicativo! Adicione os seguintes estilos abaixo ao seu arquivo styles.css:

body {font-family: sans-serif; } input {border: 1px solid # 999; preenchimento: 0,5 rem; largura: 300px; }.sem sugestões {cor: # 999; preenchimento: 0,5 rem; }.sugestões {border: 1px solid # 999; largura da borda superior: 0; estilo de lista: nenhum; margem superior: 0; altura máxima: 143px; overflow-y: automático; padding-left: 0; largura: calc (300px + 1rem); }.sugestões li {padding: 0.5rem; }.suggestion-active,.suggestions li: hover {background-color: # 008f68; cor: # fae042; cursor: ponteiro; peso da fonte: 700; }.sugestões li: not (: last-of-type) {border-bottom: 1px solid # 999; }

Nosso aplicativo será semelhante à imagem abaixo:

Conclusão

Neste tutorial, abordamos a configuração de um projeto React, a construção de um componente de preenchimento automático e o estilo de nosso.

O recurso de preenchimento automático não só pode economizar o tempo dos usuários, mas também pode guiá-los para pesquisas mais relevantes. Agora, você sabe como construir um componente de preenchimento automático do zero em seu aplicativo React!