1

Tengo un problema que llevo días sin solucionar. Estoy intentado realizar un buscador de imagenes. El ejercicio consiste en escribir en un campo de texto los nombres de las fotos y que el programa las vaya filtrando por orden de letra. El buscador tiene que recorrer el array en el que están el nombre de las fotos, y cada vez que escriba una letra en el buscador, tiene que crear las imagenes que empiecen por la letra introducida. Por ejemplo, hay una imagen que se llama Flor. Si en el buscador pongo la letra "f", tiene que crearse la foto "flor.jpg" junto a otras que empiecen por "f". Si después pones la letra "l" (fl) tienen que salirme las fotos que empiecen por "fe" y el resto tienen que ser borradas.

De momento he conseguido hacer que las fotos se creen pero al borrar una letra en el buscador, las fotos no se borran y se vuelven a crear. No encuentro la forma de hacerlo, lo estoy haciendo con DOM y con un addeventlistener(keyup). Si alguien puede ayudarme lo agradecería mucho.

Dejo el código por aquí:

const array_imatges = [
  "flor.jpg",
  "manta.jpg",
  "fleca.jpg",
  "ment.webp",
  "feli.jpg",
  "menta.jpg",
  "fletxa.jpg",
];

window.onload = function () {

    var palabra = document.getElementById("paraula"); // Este div es donde se van a colocar las fotos.
    palabra.addEventListener("keyup", registrar);

}

function registrar(){

    var texto = document.getElementById("paraula").value; // Recoge el valor que hay en la caja de texto. 
    console.log(texto);

    var answer = []; // Array donde irá la respuesta. 

    for (var i = 0; i < array_imatges.length; i++){  
        answer.push(array_imatges[i]);
        var fotografia = document.createElement("img");
            fotografia.id = array_imatges[i];
            fotografia.src = ("img/" + array_imatges[i]);
            fotografia.setAttribute("width", "300");
            fotografia.setAttribute("height", "200");
            fotografia.style.display = "inline"; 
            fotografia.hidden = false;
            document.body.appendChild(fotografia);
    } 


    document.getElementById("contenidor").innerHTML = array_imatges; 

// Esto hace que si no hay nada escrito no aparezca nada. 

if (texto.length == 0){
        document.getElementById("contenidor").style.display = "none";
        var allImg = document.getElementsByTagName("img");

        for (var j = 0; j < allImg.length; j++){
            allImg[j].style.display = "none";
        }
    } else {
        document.getElementById("contenidor").style.display = "block";
    }


1 respuesta 1

0

Estás recorriendo todo el array de imágenes sin realizar comparaciones. El proceso es sencillo:

  • En cada modificación del campo, dispara el evento input
  • Elimina todo de contenidor para asegurar que solo se mostrarán coincidencias
  • Obtén el valor y filtra el array
  • Todos los valores que coincidan estarán en answer
  • Recorre answer para agregar las imágenes y agregar cada una directamente a contenidor

const array_imatges = [
  "flor.jpg",
  "manta.jpg",
  "fleca.jpg",
  "ment.webp",
  "feli.jpg",
  "menta.jpg",
  "fletxa.jpg",
];

window.onload = function () {
    // Input donde se introduce el texto a buscar
    let palabra = document.getElementById("paraula");
    // Ejecutar con evento input
    palabra.addEventListener("input", registrar);
}

function registrar(){
    let cont = document.getElementById('contenidor');
    // Limpiar contenedor
    cont.innerHTML = '';
    
    let texto = document.getElementById("paraula").value;
    // Salir si está vacío
    if(texto.trim() == '') {
        return;
    }
    // Filtrar imágenes de acuerdo al texto
    let answer = array_imatges.filter(
        // Convertir nombre y valor a minúsculas para comparar
        item => item.toLowerCase().indexOf(texto.toLowerCase()) != -1
    ); 
    // Recorrer resultados
    answer.forEach(item => {
        // Crear imagen, definiendo ancho y alto
        let img = new Image(300, 200);
        img.src = "img/" + item;
        img.alt = item;
        img.style.display = 'inline-block';
        // Agregar a contenedor
        cont.appendChild(img);
    });
}
<input type="text" id="paraula">
<div id="contenidor"></div>

2
  • Muchissimas Gracias @Triby, me has salvado la vida!! Commented el 4 jun. 2020 a las 20:44
  • @ArnauGarcíaÁlvarez, si te sirvió, por favor marca la respuesta como aceptada. Gracias.
    – Triby
    Commented el 4 jun. 2020 a las 20:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.