Como implementar o recurso JavaScript AutoComplete

Você deve ter visto as pesquisas de preenchimento automático antes, por exemplo, enquanto pesquisam algo no Google, YouTube, etc. Talvez você tenha observado antes disso, quando digitamos uma carta em qualquer mecanismo de pesquisa, uma lista filtrada mostrou -se contra esse único caractere em particular. Como isso acontece? É o recurso de preenchimento automático que torna tudo possível. Múltiplas abordagens podem ser adotadas para implementar o recurso de preenchimento automático no JavaScript.

Neste artigo, aprenderemos um método muito básico para implementar o recurso de preenchimento automático no JavaScript, e a redação será organizada da seguinte maneira:

• O que significa autocompleto em JavaScript?
• Implementação prática do recurso de preenchimento automático no JavaScript

Então vamos começar!

O que significa autocompleto em JavaScript?

O recurso de preenchimento automático no JavaScript fornece sugestões relevantes quando alguém começa a digitar no campo de texto. Por exemplo, se um usuário digitar o caractere "C", o recurso de preenchimento automático mostrará uma lista filtrada de todas as palavras que contêm a letra "C".

Como usar o recurso de preenchimento automático no JavaScript

Nesta seção, aprendemos todos os aspectos principais necessários para implementar o recurso JavaScript AutoComplete. Então, vamos começar com o HTML:

Html

Digite o nome do assunto:

No trecho acima, desempenhamos as seguintes funções:

• Nós utilizamos o rótulo tag para especificar o rótulo para o campo de texto.
• Em seguida, utilizamos o entrada tag para criar um campo de entrada.
• Depois utilizamos o
  tag para definir uma lista não ordenada.
  • Finalmente, no roteiro Tag, especificamos o endereço do arquivo JavaScript.

  JavaScript

  const sujeitos = ['java', 'javascript', 'php', 'c ++', 'c', 'python', 'c#', 'html & css', 'r', 'swift'];
  documento.getElementById ('com').addEventListener ('input', (Eva) =>
  Deixe o SubjectSarray = [];
  if (Eva.alvo.valor)
  SubjectSarray = Assuntos.filtro (sub => sub.TolocalelowerCase ().Inclui (Eva.alvo.valor));
  SubjectSarray = SubjectSarray.mapa (sub => '
• $ sub
')

displaysubjectSarray (SubjectSarray);
);
Função DisplaysubjectSarray (SubjectSarray)
const html = !SubjectSarray.comprimento ? ": SubjectSarray.juntar(");
documento.QuerySelector ('Ul').inerhtml = html;


O bloco de código acima serve as funcionalidades listadas abaixo:

• Em primeiro lugar, criamos uma matriz chamada “assuntos”.
• Em seguida, adicionamos um ouvinte de evento ao elemento que criamos no arquivo html. Para fazer isso, utilizamos o getElementById () e passou o id do elemento.
• Em seguida, criamos uma matriz vazia chamada SubjectSarray.
• Para obter o valor de “entrada”Temos que utilizar o alvo.valor propriedade.
• Em seguida, utilizamos o filtro() Método para criar uma variedade de itens filtrados.
• Em seguida, utilizamos o mapa() Método para colocar os elementos filtrados na lista não ordenada.
• Depois, criamos uma função chamada displaysubjectSarray () para mostrar os elementos da lista.
• No displaysubjectSarray (), Primeiro, utilizamos a propriedade Length para verificar o comprimento do sujeito, se ele retornar FALSE, não mostraríamos nada, caso contrário, junte -se à matriz.

Abaixo o Snippet mostrará a saída gerada pelo programa de exemplo acima:

O trecho acima verificou que, quando o usuário inseriu a letra "C", consequentemente, o recurso de preenchimento automático mostrou a lista filtrada de palavras relevantes.

Conclusão

O autocomplete O recurso em JavaScript fornece sugestões relevantes quando alguém começa a digitar no campo de texto. Por exemplo, se um usuário digitar o caractere "j", o recurso de preenchimento automático mostrará uma lista filtrada de todas as palavras que contêm a carta "j". Neste artigo, aprendemos todos os princípios básicos do recurso de preenchimento automático com a ajuda de exemplos adequados.