Duvida de Como fazer um AutoComplete em um Input atraves de um json

Olá Diego, tudo bem com você?

A lógica de criar um autocomplete é bem simples, mas implementar pode ser bem trabalhoso, vou te dar os passos e alguns exemplos de como implementar, ok?

• O que temos que fazer é criar uma lista não ordenada embaixo do input que iremos preencher por meio de uma função

  <input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do paciente">
  <ul class="autocomplete_lista"></ul>

• Precisamos fazer uma requisição para obter os dados
• Precisamos filtrar o dado principal que será buscado

Por exemplo, no caso dessa aula poderíamos pegar o json com todos os dados do paciente mas criar um array apenas com os nomes dos pacientes

• Após isso precisamos filtrar desse array de elementos o que tem o mesmo valor do que o usuário está digitando

• Com o array filtrado apenas com palavras parecidas com o input precisamos mostrar para o usuário

Podemos fazer isso pegando a nossa ul e criando uma função que insere várias <li> de uma forma parecida com o que fizemos na hora de montar a tabela de pacientes

Esse é o básico de um autocomplete após isso poderíamos criar uma função para quando o usuário apertar a tecla para baixo ou para cima pegar o valor, entre outras coisas :)

Vou deixar 2 links que mostram códigos de autocompletes para você ter uma ideia, você pode olhar a parte de javascript e ver a implementação:

• Autocomplete de Cor
• Autocomplete de Países

Abraços e Bons Estudos!