Pessoal, estou tentando implementar isso faz algum tempo ja,,, tenho um input e gostaria de colocar a função auto complete pegando na requisição um Json que ja esta sendo criado a partir do meu banco de dados e etc) , criei um javascript conforme a aula para ler o Json no servidor atraves de AJAX , porem não sei usar esse json para implementar a função auto complete no meu input. (conforme o usuario vai digitando vai sugerindo palavras conforme cadastras no banco de dados. Alguem consegue me ajudar.
1
resposta
resposta
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:
Abraços e Bons Estudos!