problems trying to create a Search Box/Filter with Vanillajavascript

Question

In the Javascript exercise I am doing, besides creating a kind of bookstore out of a Json file, I have to include a search field, to filter by book title or writer's name. To do that, I am following W3school tutorial about it, but I am struggling to translate it to my code. Because I am not sure over which elements to loop , etc...

I would much appreciate any help to guide me on the right direction.

This is the Html and JS I have written so far :

var data = {"books":[{"portada":"https://preview.ibb.co/bC5ELQ/alex_min.png","detalle":"https://preview.ibb.co/deD10Q/alex_min.png","titulo":"Dímelo en palabras","descripcion":"El polifacético escritor catalán n.","idioma":"es"},{"portada":"https://preview.ibb.co/dvM9AQ/eddie_min.png","detalle":"https://preview.ibb.co/hnT0H5/eddie_min.png","titulo":"Lo veo negro","descripcion":"una obra maestra de la ciencia ficción.","idioma":"es"},{"portada":"https://preview.ibb.co/nF3Un5/flecha_min.png","detalle":"https://preview.ibb.co/dUgbZk/flecha_min.png","titulo":"Mi algoritmo es más rápido","descripcion":"Un libro que te deja atado a su trama ","idioma":"es"}]}

var allBooks = data.books;

function getBooks () {
    
    var flipBox = document.getElementById("flipBox");
    
    
    for (i=0; i < allBooks.length; i++) {
        
        //create flip elements
        
        var flipContainer = document.createElement("div");
        flipContainer.setAttribute("class", "flipContainer")
        
        var flipper = document.createElement("div");
        flipper.setAttribute("class", "flipper");
        
        var front = document.createElement("div");
        front.setAttribute("class", "front");
       
        var back = document.createElement("div");
        back.setAttribute("class", "back");            
        
        var coverImage = document.createElement("img");
        coverImage.setAttribute("src", allBooks[i].portada);
        coverImage.setAttribute("alt", allBooks[i].titulo);
        
        //add title
        
        var title = allBooks[i].titulo;
        var bookTitle = document.createElement("span");
        bookTitle.setAttribute("class", "bookTitle");
        bookTitle.innerHTML = title;
        var titleContainer = document.createElement("div");
        titleContainer.setAttribute("class", "titleContainer");
        
        //add title to div and then to back
        titleContainer.append(bookTitle);
        back.append(titleContainer);
        
        // add description
        
        var bookDescription = allBooks[i].descripcion;
        var text = document.createElement("div");
        text.setAttribute("class", "text");
        text.innerHTML = bookDescription;
        back.append(text);            
        
        // add more-info button . First container for a-tag, then A-tag, then button            
        var anchorContainer = document.createElement("div");
        anchorContainer.setAttribute("class", "anchorContainer")
        back.append(anchorContainer);
        
        var anchor = document.createElement("a");
        anchor.setAttribute("id", "anchor");
        anchor.setAttribute("href", allBooks[i].detalle);
        anchor.setAttribute("data-fancybox", "images");
        anchorContainer.append(anchor);
        
        var button = document.createElement("button");
        button.setAttribute("class", "button");
        button.innerHTML = "More Info";
        
        anchor.append(button);
    
        //Add elements
        
        front.appendChild(coverImage);
        flipper.append(front, back);
        flipContainer.append(flipper)
        
        flipBox.append(flipContainer);
        
    }
}
getBooks()

function searchBox() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  
    console.log(filter);

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < allBooks[i].length; i++) {
    a = allBooks[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
searchBox()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="bookshop_css.css">
<!-- I have deleted bootstrap and fancybox links and scripts, to make it shorter -->


  <title>Bookshop</title>
</head>

<body>

  <h1> here comes the books</h1>

  <div class="searchBar">
    <input type="text" id="myInput" onkeyup="searchBox()" value="" placeholder="Search for book title" title="Type in a name">
  </div>

  <div id="flipBox" class="container-fluid boxContainer grid">
  </div>
  <script src="bookshop_just_data.js"></script>
  <script src="bookshop_myscript.js"></script>
</body>
</html>

Hints: 1) change the `HTMLInput` type attribute to `search`. 2) Explore the [`Array.prototype.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) method to make your life easier. 3) Your `getBooks()` function should do _one thing and one thing only_, perhaps you could have a different function that creates the elements with the data array. 4) Loop over data array and then clear and redraw the elements. — Randy Casburn, May 26 '19 at 16:36
1) done 2) looks shorter and cleaner ...but i cannot find the way to adapt it to my code :/ 3)&4) I think I understand what you say, but without any example, I am still quit lost ... Thanks anyway for your help. — notADevYet, May 26 '19 at 23:11
hello, where is the writer's name, I see the book's title but not the writer's name. For example, `"portada":"https://preview.ibb.co/bC5ELQ/alex_min.png","detalle":"https://preview.ibb.co/deD10Q/alex_min.png","titulo":"Dímelo en palabras","descripcion":"El polifacético escritor catalán n.","idioma":"es"` does not contain that particular info, I think. And you said that you needed to filter by book title or author. — Scaramouche, May 27 '19 at 00:51
You are right @Scaramouche , I just pasted a small portion of the data to make it shorter. I guess once I figure out how to filter by title, I guess than to filter others fields will be easy. — notADevYet, May 27 '19 at 10:27

Scaramouche · Accepted Answer · 2019-05-28T15:01:44.487

allBooks is an array of objects, hence allBooks[i] is an object, hence allBooks[i].length is undefined, since length is not an object's property or method :).

That said, there's no need to traverse allBooks (note there are many ways to achieve what you are trying). Here's my shot at it.

You just need to get the input text and test it against the title and author's name (which I couldn't find in your question, so this answer works only with the books' titles).

The books' titles are shown inside each span.bookTitle, so those are the first you should cache in a variable. Notice, caching them from the beginning will help with performance down the road when there are many books, preventing the need for querying the DOM on each keystroke BUT, remember to update that cache if you plan on adding books dynamically to the list.

Then you just need to traverse those spans and test their text contents, that's forEach. Then, every time you find a match, you show/hide the span's ancestor that matches .flipper.

Last but not least, I recommend not in-lining events in your html, try attaching them in JS, also don't use keyup for this, because it will process unnecessary keystrokes like Shift, Ctrl, etc., unless that's what you want..., if not go with input.

HIH

(()=>{let data = {"books": [{"portada": "https://preview.ibb.co/bC5ELQ/alex_min.png", "detalle": "https://preview.ibb.co/deD10Q/alex_min.png", "titulo": "Dímelo en palabras", "descripcion": "El polifacético escritor catalán n.", "idioma": "es"}, {"portada": "https://preview.ibb.co/dvM9AQ/eddie_min.png", "detalle": "https://preview.ibb.co/hnT0H5/eddie_min.png", "titulo": "Lo veo negro", "descripcion": "una obra maestra de la ciencia ficción.", "idioma": "es"}, {"portada": "https://preview.ibb.co/nF3Un5/flecha_min.png", "detalle": "https://preview.ibb.co/dUgbZk/flecha_min.png", "titulo": "Mi algoritmo es más rápido", "descripcion": "Un libro que te deja atado a su trama ", "idioma": "es"}]};
            let allBooks = data.books;
            function getBooks() {
                let flipBox = document.getElementById("flipBox");
                for (i = 0; i < allBooks.length; i++) {
                    let flipContainer = document.createElement("div");
                    flipContainer.setAttribute("class", "flipContainer")

                    let flipper = document.createElement("div");
                    flipper.setAttribute("class", "flipper");

                    let front = document.createElement("div");
                    front.setAttribute("class", "front");

                    let back = document.createElement("div");
                    back.setAttribute("class", "back");

                    let coverImage = document.createElement("img");
                    coverImage.setAttribute("src", allBooks[i].portada);
                    coverImage.setAttribute("alt", allBooks[i].titulo);

                    //add title

                    let title = allBooks[i].titulo;
                    let bookTitle = document.createElement("span");
                    bookTitle.setAttribute("class", "bookTitle");
                    bookTitle.innerHTML = title;
                    let titleContainer = document.createElement("div");
                    titleContainer.setAttribute("class", "titleContainer");

                    //add title to div and then to back
                    titleContainer.append(bookTitle);
                    back.append(titleContainer);

                    // add description

                    let bookDescription = allBooks[i].descripcion;
                    let text = document.createElement("div");
                    text.setAttribute("class", "text");
                    text.innerHTML = bookDescription;
                    back.append(text);

                    // add more-info button . First container for a-tag, then A-tag, then button
                    let anchorContainer = document.createElement("div");
                    anchorContainer.setAttribute("class", "anchorContainer");
                    back.append(anchorContainer);

                    let anchor = document.createElement("a");
                    anchor.setAttribute("id", "anchor");
                    anchor.setAttribute("href", allBooks[i].detalle);
                    anchor.setAttribute("data-fancybox", "images");
                    anchorContainer.append(anchor);

                    let button = document.createElement("button");
                    button.setAttribute("class", "button");
                    button.innerHTML = "More Info";

                    anchor.append(button);

                    //Add elements

                    front.appendChild(coverImage);
                    flipper.append(front, back);
                    flipContainer.append(flipper)

                    flipBox.append(flipContainer);

                }
            }
            getBooks();

            //cache the spans
            let elements = document.querySelectorAll('span.bookTitle');
            function searchBox() {
                let input = document.getElementById('myInput'),
                        filter = input.value.toLowerCase();
                applyInput(elements, filter);
            }

            function applyInput(elements, text) {
                Array.prototype.forEach.call(elements, function (element) {
                    let parentToAffect = element.closest('.flipper');
                    if (RegExp(text).test(element.textContent.toLowerCase())) {
                        parentToAffect.style.display = 'block';
                    } else
                        parentToAffect.style.display = 'none';
                });
            }

            document.getElementById('myInput').addEventListener('input', () => {
                searchBox();
            });
            //searchBox() <---- no need to execute this function on page load
            })();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="bookshop_css.css">
<!-- I have deleted bootstrap and fancybox links and scripts, to make it shorter -->


  <title>Bookshop</title>
</head>

<body>

  <h1> here come<!--s--> the books</h1>

  <div class="searchBar">
    <input type="text" id="myInput" value="" placeholder="Search for book title" title="Type in a name">
  </div>

  <div id="flipBox" class="container-fluid boxContainer grid">
  </div>
  <script src="bookshop_just_data.js"></script>
  <script src="bookshop_myscript.js"></script>
</body>
</html>

(() => {
  let data = {
    "books": [{
      "portada": "https://preview.ibb.co/bC5ELQ/alex_min.png",
      "detalle": "https://preview.ibb.co/deD10Q/alex_min.png",
      "titulo": "Dímelo en palabras",
      "descripcion": "El polifacético escritor catalán nos muestra en su novela más romántica como, básicamente, nuestra relación es tan fácil como decirnos las cosas como son. Tal cual.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/dvM9AQ/eddie_min.png",
      "detalle": "https://preview.ibb.co/hnT0H5/eddie_min.png",
      "titulo": "Lo veo negro",
      "descripcion": "En ocasiones crees entender algo cuando te lo están explicando, pero en el momento de ponerte a programar surge siempre esta duda. ¿Lo ves?. Eduard Català se saca de la manga una obra maestra de la ciencia ficción.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/nF3Un5/flecha_min.png",
      "detalle": "https://preview.ibb.co/dUgbZk/flecha_min.png",
      "titulo": "Mi algoritmo es más rápido",
      "descripcion": "De nuevo Guerrero, de nuevo el flecha. Un libro que te deja atado a su trama desde que abres la cubierta. Te atrapa rápido, muy rápido, hyper rápido.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/hPod4k/joan_min.png",
      "detalle": "https://preview.ibb.co/f6J6qQ/joan_min.png",
      "titulo": "Amazing Design Art",
      "descripcion": "Delicado y cuidado en cada palabra, este segundo tomo de la Trilogía 'Amor Front-End' es de momento el más sofisticado del autor. Nos fascinó 'Romance CSS', nos encanta este, ¿Qué nos deparará 'Orgasmo JavaScript'?",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/iVRAuk/maruti_min.png",
      "detalle": "https://preview.ibb.co/fyBzn5/maruti_min.png",
      "titulo": "The Javascript Guru",
      "descripcion": "From India to Spain, this book explains us how your dreams like a developer can be real. Functions, Objects, Variables... All of JavaScript is here in this Amazing book.",
      "idioma": "en"
    }, {
      "portada": "https://preview.ibb.co/n82iEk/oruc_min.png",
      "detalle": "https://preview.ibb.co/h3GbZk/oruc_min.png",
      "titulo": "Azerbaijan Roulette",
      "descripcion": "Meanwhile you wait for the next Code challenge you can play some football with your mates... GOOOOOOOAAAAL!!",
      "idioma": "en"
    }, {
      "portada": "https://preview.ibb.co/bHMWPk/roosy_min.png",
      "detalle": "https://preview.ibb.co/iwNGqQ/roosy_min.png",
      "titulo": "Java... what?",
      "descripcion": "For those of you that don't understand nothing about new technologies, Mr. Roosy arrives to give you some ray of light in your darkness. You'll never ask Java...what? again.",
      "idioma": "en"
    }, {
      "portada": "https://preview.ibb.co/n06LH5/vcarpio_min.png",
      "detalle": "https://preview.ibb.co/mJXuc5/vcarpio_min.png",
      "titulo": "Digital Nomad",
      "descripcion": "Entras a las 9 de la mañana, te repanchingas en tu silla, pones los pies en la mesa y empiezas a programar. La vida de un nómada digital puede ser maravillosa. Gran relato corto del Escritor y ex-programador de Facebook Victor Carpio.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/dPxsYv/Albert_min.png",
      "detalle": "https://preview.ibb.co/fwyY6F/Albert_min.png",
      "titulo": "El por qué de no usar Mustache",
      "descripcion": "El famoso escritor Albert Lara nos enseña el poder de JavaScript para crear plantillas y las razones por las que un sistema ideado justamente para este fin como es Mustache, no siempre es la mejor opción...",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/e1z6tv/Bryn_min.png",
      "detalle": "https://preview.ibb.co/dVLfmF/Bryn_min.png",
      "titulo": "Shut up little bastards",
      "descripcion": "El silencio es necesario en estos tiempos para poder concentrarte. Bryn lucharÃ¡ contra viento y marea en esta cruda historia basada en hechos reales.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/fqbmtv/Eduardo_min.png",
      "detalle": "https://preview.ibb.co/mSBmRF/Eduardo_min.png",
      "titulo": "Sudo mucho",
      "descripcion": "Para qué aprender JavaScript si puedes estar subiendo copas sin parar. La historia de Eduardo nos llevará de estar hundido en la mierda hasta seguir hundido en la mierda.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/ctuvmF/Erica_min.png",
      "detalle": "https://preview.ibb.co/n5zHYv/Erica_min.png",
      "titulo": "No contéis conmigo",
      "descripcion": "Hay veces que no se puede soportar la presión. Este es uno de esos casos. Erica no lo consiguió pero hay gente que dice haberla visto en ciertas noches de verano...",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/hBtc0a/Gerard_min.png",
      "detalle": "https://preview.ibb.co/nKxFLa/Gerard_min.png",
      "titulo": "Asincronía y su puta madre",
      "descripcion": "¿Qué entendemos por asincronía? ¿Por qué existe en este maldito mundo? ¿No es suficientemente sencillo el mundo síncrono?. De Haro nos trae una obra de ciencia ficción con más de un giro que no te esperas.",
      "idioma": "en"
    }, {
      "portada": "https://preview.ibb.co/esZT6F/Juan_min.png",
      "detalle": "https://preview.ibb.co/g1ZjDv/Juan_min.png",
      "titulo": "El java empieza ahorita",
      "descripcion": "HTML, CSS, JavaScript e incluso Jquery son juegos de niÃ±os para un hombre que se lo propone. Pero Java ya son palabras mayores. Un reto que hay que aceptar y asumir que serÃ¡ duro. La parte front quedó atrás, el Java empieza ahorita.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/jv3c0a/Lluis_min.png",
      "detalle": "https://preview.ibb.co/b0st6F/Lluis_min.png",
      "titulo": "document.write()",
      "descripcion": "No necesito más. No quiero funciones que no sé como funcionan. Document.write() hace lo que quiero y cuando quiero. Trágico relato de un hombre con una obsesión...",
      "idioma": "ca"
    }, {
      "portada": "https://preview.ibb.co/bBJXYv/Muhammad_min.png",
      "detalle": "https://preview.ibb.co/dJuHYv/Muhammad_min.png",
      "titulo": "Learning Syntax",
      "descripcion": "A man with the need to learn every word of every new programming language. An almost impossible goal that will make him struggle with life and with his interior.",
      "idioma": "en"
    }, {
      "portada": "https://preview.ibb.co/ja3XYv/Nuria_min.png",
      "detalle": "https://preview.ibb.co/m72RRF/Nuria_min.png",
      "titulo": "Design First",
      "descripcion": "Por mucho que JavaScript ayude a darle funcionalidad a la pÃ¡gina, lo primordial es el diseño. Sin un buen diseÃ±o, una pagina cae por su propio peso. Nuria nos explica la importancia de un gran impacto visual.",
      "idioma": "en"
    }, {
      "portada": "https://preview.ibb.co/hCVqLa/Vicent_min.png",
      "detalle": "https://preview.ibb.co/ci0rtv/Vicent_min.png",
      "titulo": "Code of Vincent",
      "descripcion": "El escritor fantástico Vicent Clapés nos trae una historia que narra como un simple programador consiguió convertirse en un autentico guerrero a base de código. Batallas contra dragones de Jquery y Magos de Javascript en una aventura de lo más freek.",
      "idioma": "ca"
    }, {
      "portada": "https://preview.ibb.co/iVRmtv/Victor_min.png",
      "detalle": "https://preview.ibb.co/gL0D6F/Victor_min.png",
      "titulo": "El maestro del parÃ¡metro",
      "descripcion": "Cuando te das cuenta que 10 funciones similares se pueden transformar en una sola simplemente pasándole un par de parámetros te das cuenta de todo su potencial. Es entonces cuando de transformas en un maestro del parámetro.",
      "idioma": "en"
    }, {
      "portada": "https://preview.ibb.co/dGcsYv/Auger_min.png",
      "detalle": "https://preview.ibb.co/dDGWtv/Auger_min.png",
      "titulo": "Local Storage",
      "descripcion": "Llamadas JSON, objetos Javascript, Table Sorter, iframe, pantallas de loading... Todo esto es tiempo perdido para el usuario. Necesitamos algo que nos ayude con eso. Aquí es donde entra el poder del Local Storage. Gotcha!!",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/h8s4fa/Edu_min.png",
      "detalle": "https://preview.ibb.co/js1aLa/Edu_min.png",
      "titulo": "Difícil. A veces lo fácil aburre.",
      "descripcion": "Cómo funciona un sort por dentro? ¿Por qué usar esta función y no inventar una que nos complique más la vida?. Estas y otras preguntas en un libro orientado a esas personas que piensan fuera de la caja.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/csHsYv/Francesc_min.png",
      "detalle": "https://preview.ibb.co/hJsRRF/Francesc_min.png",
      "titulo": "No lo entiendo",
      "descripcion": "El escritor, en su biografía más completa hasta la fecha, nos pone en su piel durante su iniciación a la programación antes de trabajar en Google. Era joven, con toda la vida por delante, pero no entendía nada...",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/gjX4fa/Ignasi_min.png",
      "detalle": "https://preview.ibb.co/iotN0a/Ignasi_min.png",
      "titulo": "La la la. City of code",
      "descripcion": "Código, código y más código. Entre incontables líneas de código se cuela este programador con gran experiencia autor de otros Best Sellers como 'Tucutucu Master' o 'Métele chicha a mi salchicha'...",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/cV1QmF/Raul_min.png",
      "detalle": "https://preview.ibb.co/jSRaLa/Raul_min.png",
      "titulo": "Function Man",
      "descripcion": "Típico cuatro ojos que está todo el día programando y haciendo mierdas como esta, en este libro cuenta como crear más funciones que variables... Un loco.",
      "idioma": "es"
    }, {
      "portada": "https://preview.ibb.co/kHC9Va/Gabriel_min.png",
      "detalle": "https://preview.ibb.co/m0APDv/Gabriel_min.png",
      "titulo": "Java Di Janeiro",
      "descripcion": "Con Java en la sangre y Php en las venas, desde Brasil llega este ex-músico para explicarnos todas las ventajas del, seguramente, mejor lenguaje del mundo.",
      "idioma": "es"
    }]
  };
  let allBooks = data.books;

  function getBooks() {
    let flipBox = document.getElementById("flipBox");
    let flipContainer = document.createElement("div");
      flipContainer.setAttribute("class", "flipContainer");
      flipBox.append(flipContainer);
    for (i = 0; i < allBooks.length; i++) {
      

      let flipper = document.createElement("div");
      flipper.setAttribute("class", "flipper");

      let front = document.createElement("div");
      front.setAttribute("class", "front");

      let back = document.createElement("div");
      back.setAttribute("class", "back");

      let coverImage = document.createElement("img");
      coverImage.setAttribute("src", allBooks[i].portada);
      coverImage.setAttribute("alt", allBooks[i].titulo);

      //add title

      let title = allBooks[i].titulo;
      let bookTitle = document.createElement("span");
      bookTitle.setAttribute("class", "bookTitle");
      bookTitle.innerHTML = title;
      let titleContainer = document.createElement("div");
      titleContainer.setAttribute("class", "titleContainer");

      //add title to div and then to back
      titleContainer.append(bookTitle);
      back.append(titleContainer);

      // add description

      let bookDescription = allBooks[i].descripcion;
      let text = document.createElement("div");
      text.setAttribute("class", "text");
      text.innerHTML = bookDescription;
      back.append(text);

      // add more-info button . First container for a-tag, then A-tag, then button
      let anchorContainer = document.createElement("div");
      anchorContainer.setAttribute("class", "anchorContainer");
      back.append(anchorContainer);

      let anchor = document.createElement("a");
      anchor.setAttribute("id", "anchor");
      anchor.setAttribute("href", allBooks[i].detalle);
      anchor.setAttribute("data-fancybox", "images");
      anchorContainer.append(anchor);

      let button = document.createElement("button");
      button.setAttribute("class", "button");
      button.innerHTML = "More Info";

      anchor.append(button);

      //Add elements

      front.appendChild(coverImage);
      flipper.append(front, back);
      //flipContainer.append(flipper)

      //flipBox.append(flipContainer);
      flipContainer.append(flipper);

    }
  }
  getBooks();

  //cache the spans
  let elements = document.querySelectorAll('span.bookTitle');

  function searchBox() {
    let input = document.getElementById('myInput'),
      filter = input.value.toLowerCase();
    applyInput(elements, filter);
  }

  function applyInput(elements, text) {
    Array.prototype.forEach.call(elements, function(element) {
      let parentToAffect = element.closest('.flipper');
      if (RegExp(text).test(element.textContent.toLowerCase())) {
        parentToAffect.style.display = 'block';
      } else
        parentToAffect.style.display = 'none';
    });
  }

  document.getElementById('myInput').addEventListener('input', () => {
    searchBox();
  });
  //searchBox() <---- no need to execute this function on page load
})();

.navbar {
  display: flex;
}

.pageTitle {
  font-size: 60px;
  color: aqua;
  display: flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quicksearch {
  width: 100%;
  /*    height: 30px;*/
  font-size: 16px;
}

body {
  background-image: url("/images/colorful-library.jpg") !important;
  background-size: auto;
  font-family: 'Roboto', Tahoma, Arial, sans-serif;
  line-height: 1.5;
  font-size: 13px;
  background-repeat: repeat;
  background-attachment: fixed;
}

.pageTitle {
  font-size: 50px;
  color: black;
  display: flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boxContainer {
  width: 80%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 50px;
  padding-top: 50px;
}

img {
  width: 200px;
  /*width&Height must be same in .flipContainer, .front, .back*/
  height: 300px;
  border: 2px solid grey
}

.fancybox-image {
  width: 700px !important;
  height: 900px !important;
}


/* confir de CSS obtenida en https://davidwalsh.name/css-flip */


/* entire container, keeps perspective */

.flipContainer {
  perspective: 1000px;
}


/* flip the pane when hovered */

.flipContainer .flipper:hover,
.flipContainer .flipper.hover {
  transform: rotateY(180deg);
}

.flipContainer,
.front,
.back {
  width: 200px;
  height: 300px;
  margin-right: 5px
}


/* flip speed goes here */

.flipper {
  transition: 0.99s;
  transform-style: preserve-3d;
  position: relative;
}


/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}


/* front pane, placed above back */

.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  margin-top: 5px;
  background-color: gainsboro;
  border: 2px solid grey;
  color: black;
  position: relative;
}


/* fin CSS code from davidwalsh.name */


/* Style for back elements : title, more info etc... */

.titleContainer {
  font-size: 40px !important;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 5px;
}

.text {
  text-align: justify;
  padding: 10px;
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  position: absolute;
  top: 100px;
  font-size: 20px !important;
}

.anchorContainer {
  width: 100%;
  position: absolute;
  top: 350px;
}

.button {
  /*   margin-top: 10px;*/
  font-size: 16px;
  width: 139.73px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 2px 2px black;
  margin-top: 1px;
  background-color: orangered;
  color: white;
  margin-bottom: 2px;
}

button:hover {
  box-shadow: 1px 1px black;
  margin-top: 0px;
  background-color: #ff704d;
}

a:hover {
  text-decoration: none;
}

a {
  display: flex;
  justify-content: center;
}

.searchBar {
  position: fixed;
  display: inline-block;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 344px;
  height: 48px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: +1;
}

input {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 40px;
  left: 172px;
  margin: 4px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-sizing: border-box;
  font-size: 50px;
  font-weight: 300
}

<h1> here come
    <!--s-->the books</h1>

  <div class="searchBar">
    <input type="text" id="myInput" value="" placeholder="Search for book title" title="Type in a name">
  </div>

  <div id="flipBox" class="container-fluid boxContainer grid">
  </div>

really teaching! thanks a lot. I will "study" it hard ... I am having big time problems figuring out filters with JS ...and the tutorials i found are either too simple, or too complicated, nothing in beetween :D — notADevYet, May 27 '19 at 10:36
hey again! first of all, thanks a lot for taking the time to figure it out. Just 2 things. 1) the effect is a bit strange, with books disappearing from its position when I type, and if they are below, you can't see if you found them or not. Is there a way to display the selected books always on top, like creating a new selection of books, and not like disappearing from its position, creating gaps .... I don't know if i am being clear enough. 2)I cant really understand yur code in a way that i can put into practice for different situations. Would you have any advice about tutorials 2study? — notADevYet, May 27 '19 at 14:05
hi, @notADevYet, I don't understand what you mean by *if they are below, you can't see if you found them or not*. About *books disappearing from its position*, of course they disappear if their title does not match with the filter input. Did you run the code snippet in the answer? Full screen? — Scaramouche, May 27 '19 at 15:02
Yeah, I run it here, Works as it should, but in my code, with the whole array, looks weird. The array has 25 books, at fullscreen I can see a grid with around 16 of them. when I look for the name of one not on the screen (viewport), those not matching the criteria disappear, leaving his gap empty (not displaying the remaining books one next to the other). And if the selected books are outside the viewport, I have to scroll down to see which books match the search. Running the snippet here it looks all right with those 3. But dont know if pasting here the whole array would help. — notADevYet, May 27 '19 at 15:25
@notADevYet, well, I really can't think of anything to help you with your actual code, hopefully you'll figure it out. Also, *But dont know if pasting here the whole array would help*, try that, use the snippet with the whole array and test it. I hope the answer helps, good luck! — Scaramouche, May 27 '19 at 16:49
hey @Scaramouche , just to let you know that now that I have added the whole data and CSS, it does the same weird effect as described before :/ Anyway I really appreciate your help and the time you took (and lost) with it. Thank you very much! Just one last thing, if you ever read this, as I asked you before, if you knew any good tutorial (for beginners) that helped with tasks like that (creating filters, etc...) in Vanilla JS, would be great. have a nice day! — notADevYet, May 27 '19 at 22:29
@notADevYet, I rejected your edit since it was so different from the answer BUT, I took a look at it and I think I know why you were having all those gaps in between every time you filtered the books. In the code you tried to add to the answer, I commented out two lines in JS and replaced them with one. READ CAREFULLY, basically it boils down to this: in your question you add the `flipper`s to ONE SINGLE `flipContainer` BUT in the code you tried to add now, you had one `flipper` per `flipContainer`, I changed that and now there are no more gaps. Try to work around that, good luck — Scaramouche, May 27 '19 at 22:43
as before, you are dammed right. I don't really get why , or the difference, but It works. I will try to understand it to get some knowleage out of it. Thanks again! — notADevYet, May 27 '19 at 23:12
i commented too quick ....it works, yeah, but not the flipping effect ...well, one cannot have all, right? :D ... let's see. Have a good night/day wherever you live! — notADevYet, May 27 '19 at 23:16
@notADevYet, there, flip effect restored. also, in the best interest of the community, if an answer is correct, you should mark it so, if not at least down/up vote it so future readers get a lead on where to look first when they have a similar problem. good luck again! — Scaramouche, May 28 '19 at 02:15
now they flip all at once , hahaha...this is endless. Will see. Sorry for that, I am still only a couple of weeks old in this and I still miss a lot of things. Now it is marked as correct, since it makes the search work. For the rest, I will find a way I think. Thanks again! — notADevYet, May 28 '19 at 08:52
@notADevYet, there, fixed again, about the tutorials, there are many online you can look, but when it comes to documentation, function reference, examples and browser compatibility you should always rely on https://developer.mozilla.org/ — Scaramouche, May 28 '19 at 15:04
, million thanks again! ...it is helping me a lot, really. One last question : the " })(); " at the bootom of the JS code, do they have any function? since I think they don't have any opening. Or are there to include the last line with the Eventlistener function inside the getbooks() function?? — notADevYet, May 29 '19 at 14:15
@notADevYet, funny you noticed the `})();` at the end but didn't notice the `(() => {` at the very beginning of the code. `(()=>{any code here})` is just to keep the JS scope clean, meaning no function or variable that is declared inside those curly brackets will be accessible anywhere else in your app's JS code. About the last `()`, just google *self executing functions in js* and read [this](https://stackoverflow.com/a/592414/4770813) — Scaramouche, May 29 '19 at 20:34
got it! I did skipped the opening because I assumed that part of the JS was untouched, specially since it was only the Json object....my bad! One new thing I learned , and a very interesting reading about the self executing functions :) . Thanks once more. — notADevYet, May 30 '19 at 22:18

problems trying to create a Search Box/Filter with Vanillajavascript

1 Answers1