Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Lista de sugerencia API GIPHY con JavaScript

JavaScript - Lista de sugerencia API GIPHY con JavaScript

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 17
Ha aumentado su posición en 5 puestos 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