Fazendo a lista reagir à entrada de dados

Agora que a lista já aparece a partir de um objeto, precisamos fazer com que ela seja filtrada pelo <input> que criamos mais cedo.

Para isso, vamos precisar de algumas ferramentas do JavaScript e do DOM: do primeiro, a API String , e especificamente seus métodos includes e indexOf ; do segundo, a parte mais básica da API de eventos, Element.addEventListener .

Acontece que toda vez que você pratica uma ação de entrada de dados em um elemento de formulário, o evento input é emitido. Usando ele, podemos extrair o novo valor a cada atualização. Vamos experimentar:

Um exemplo um tanto irritante de como capturar a entrada do usuário

Experimente adicionar o código acima à página (se estiver com preguiça de digitar, o snippet estará mais abaixo). Cada vez que um valor for inserido na caixinha, um alerta nativo do navegador aparecerá na tela e esperará pelo seu OK. Além de irritante, exemplifica o que queremos fazer — manipular o valor inserido na caixa.

Agora vamos usar a função que definimos mais cedo, elementList , para renderizar a lista cada vez que o evento input for ouvido. Copie a linha usada para criar a lista para dentro do monitor de evento. Não se esqueça, também, de remover a lista anterior, ou você vai acabar com dezenas de listas:

Recriando a lista a cada inserção no filtro