Post

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

Esta postagem está licenciada sob CC BY 4.0 pelo autor.