Sugestão Automática.
Dia 15 do projeto 30 dias com js
Chegamos à terceira semana do projeto!
O objetivo desta vez foi criar um input com sugestões de texto em tempo real. Para isso, existem várias abordagens possíveis, e eu escolhi utilizar um JSON contendo uma lista de linguagens de programação.
No HTML, criei um input e uma div vazia, que será usada para exibir as sugestões.
Já no JavaScript, desenvolvi a função Sugestao
. Ela importa a lista do JSON e, conforme o usuário digita no input, faz uma busca por palavras que contenham as mesmas letras. Quando o usuário clica em uma sugestão, o campo de entrada é preenchido automaticamente com o texto selecionado, e a lista de sugestões é limpa.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function Sugestao() {
const listaDeSugestaoUrl = "/listaDeSugestao.json";
const input = document.getElementById("pesquisa");
const caixaDeSugestao = document.getElementById("sugestao");
fetch(listaDeSugestaoUrl)
.then((response) => response.json())
.then((listaDeSugestao) => {
input.addEventListener("input", () => {
const query = input.value.toLowerCase();
caixaDeSugestao.innerText = "";
if (query) {
const addSugestao = listaDeSugestao.filter((item) =>
item.toLowerCase().includes(query)
);
addSugestao.forEach((sugestao) => {
const div = document.createElement("div");
div.textContent = sugestao;
div.addEventListener("click", () => {
input.value = sugestao;
caixaDeSugestao.innerHTML = "";
});
caixaDeSugestao.appendChild(div);
});
}
});
})
.catch((error) =>
console.error("Erro ao carregar a lista de sugestões:", error)
);
document.addEventListener("click", (e) => {
if (e.target !== input) {
caixaDeSugestao.innerHTML = "";
}
});
}
Sugestao();
O resultado final você pode conferir aqui
link para o repositorio do projeto