JavaScript - Lista de sugerencia API GIPHY con JavaScript

 
Vista:
sin imagen de perfil
Val: 17
Ha aumentado 1 puesto en JavaScript (en relaci√≥n al √ļltimo mes)
Gr√°fica de JavaScript

Lista de sugerencia API GIPHY con JavaScript

Publicado por Diego (1 intervenci√≥n) el 11/01/2021 03:06:56
Buenas noches,
Estoy intentando hacer una lista de sugerencia con JavaScript de las opciones que me de la API GIPHY, pero no lo consigo.
Con este c√≥digo me trae los resultados de una b√ļsqueda de GIF, pero me hace falta la lista de sugerencia.
Si alguien me puede ayudar por favor y muchas gracias de antemano.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocompletado</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
 
    <div class="form">
        <div class="autocompletar">
            <input type="text" name="tipo-mascota" id="tipo-mascota" placeholder="Tipo de mascota">
        </div>
    </div>
 
    <script src="app.js"></script>
</body>
</html>

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
body {
    font-family: Arial, Helvetica, sans-serif;
    /* font-family: Roboto; */
    display: flex;
    justify-content: center;
}
 
.form {
    /* margin: 50px auto; */
    width: 334px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 50px;
    background: green;
    position: relative;
}
 
.autocompletar {
    position: absolute;
    display: inline-block;
    width: 100%;
    background: greenyellow;
    border: 1px solid  #572EE5;
    width: 100%;
    border-radius: 27px;
    overflow: hidden;
}
 
strong {
    /* color: #9CAFC3; */
}
 
#tipo-mascota {
    /* background-color: #FFFFFF; */
    /* background: hotpink; */
    border: none;
    font-weight: 1px;
    font-size: 1rem;
    color: #000000;
    font-family: 'Roboto';
    font-weight: 400;
    padding: 10px 25px;
    width: 75%;
    outline: none;
    overflow: hidden;
}
 
.lista-autocompletar-items {
    /* color: #ccc; */
    /* position: absolute; */
    /* border: 1px solid #d4d4d4; */
    /* border-radius: 27px; */
    border-bottom: none;
    font-size: 1rem;
    color: #9CAFC3;
    font-family: 'Roboto';
    font-weight: 400;
    z-index: 99;
    top: 100%;
    left: 20px;
    right: 0;
    width: 100%;
    background: indigo;
}
 
.lista-autocompletar-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    width: 100%;
    /* border-radius: 27px; */
    background: lightblue;
}
 
.lista-autocompletar-items div:hover {
    background-color: #f8fafc;
}
 
.autocompletar-active {
    background-color: #f8fafc !important;
    color: #a1caff;
}
 
.autocompletar-active strong {
    color: #9CAFC3;
}
 
#tipo-mascota-lista-autocompletar div{
    padding: 10px 25px;
}

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
const inputMascota = document.querySelector('#tipo-mascota');
const keyGiphy = '';
 
const count = 2;
let offset = 0;
 
let searchText = '';
 
const getData = async () => {
    const url = `https://api.giphy.com/v1/gifs/search?api_key=${keyGiphy}&q=${searchText}&limit=${count}&offset=${offset}&rating=G&lang=?&tag=oops`;
 
    const res = await fetch(url);
    const resJson = await res.json();
    console.log(resJson);
 
    autocompletar(resJson);
 
}
 
function autocompletar(data) {
 
    let indexFocus = -1;
 
    // Evento para el input
    inputMascota.addEventListener('input', function () { // Cada vez que cambia el texto del input
        const tipoMascota = this.value; // This hace referencia al objeto "tipoMascota" que el que estamos modificando internamente
 
        // Validar si el input est√° vacio no busca nada
        if (!tipoMascota) {
            cerrarLista();
            return false;
        }
 
        cerrarLista();
 
        // Crear la lista de sugerencia
        const divList = document.createElement('div');
        divList.setAttribute('id', this.id + '-lista-autocompletar');
        divList.setAttribute('class', 'lista-autocompletar-items');
        this.parentNode.appendChild(divList);
 
        // Validar el arreglo VS el input
        if (data.length == 0) return false;
 
        data.data.forEach((item) => {
            const elementoLista = document.createElement('div');
 
            elementoLista.innerHTML = item;
            elementoLista.addEventListener('click', function () {
                inputMascota.value = this.textContent;
                console.log('Hola ' + inputMascota.value);
                // cerrarLista();
                return false;
            });
            divList.appendChild(elementoLista);
        });
        searchText = inputMascota.value;
        getData();
    });
    // Evento para darle funciones a las teclas
    inputMascota.addEventListener('keyup', function (e) {
        const divList = document.querySelector('#' + this.id + '-lista-autocompletar'); // Selecciona la clase creada para la lista
        let items;
        // Recorrer la lista con las flechas y la tecla enter
        if (divList) {
            items = divList.querySelectorAll('div'); // Selecciona todos los div creados dentro de la lista "-lista-autocompletar"
 
            switch (e.key) {
                case 'ArrowDown': //Tecla de abajo 40
                    indexFocus++;
                    if (indexFocus > items.length - 1) indexFocus = items.length - 1;
                    break;
                case 'ArrowUp': //Tecla de arriba 38
                    indexFocus--;
                    if (indexFocus < 0) indexFocus = 0;
                    break;
                case 'Enter': //Tecla enter 13
                    e.preventDefault();
                    if (indexFocus > -1) {
                        items[indexFocus].click();
                    }
                    indexFocus = -1;
                    break;
                default:
                    break;
            }
            seleccionar(items, indexFocus);
            return false;
        }
    });
    // Cerrar la lista al darle click en cualquier parte del documento
    document.addEventListener('click', () => {
        cerrarLista();
    });
}
 
// Seleccionar la fila
function seleccionar(items, indexFocus) {
    if (!items || indexFocus == -1) return false;
    items.forEach(x => { x.classList.remove('autocompletar-active') });
    items[indexFocus].classList.add('autocompletar-active');
}
// Cerrar la lista
function cerrarLista() {
    const items = document.querySelectorAll('.lista-autocompletar-items');
    items.forEach(item => {
        item.parentNode.removeChild(item);
    });
    indexFocus = -1;
}
 
getData();
Valora esta pregunta
Me gusta: Est√° pregunta es √ļtil y esta claraNo me gusta: Est√° pregunta no esta clara o no es √ļtil
0
Responder