проблемы при попытке создать окно поиска / фильтр с помощью Vanillajavascript

Question

В упражнении Javascript, которое я выполняю, помимо создания своего рода книжного магазина из файла Json, я должен включить поле поиска для фильтрации по названию книги или имени автора.Для этого я следую учебному пособию по W3school, но изо всех сил пытаюсь перевести его в свой код.Потому что я не уверен в том, какие элементы для цикла и т. Д.до сих пор:

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>

Answer 1

allBooks является массивом объектов, следовательно, allBooks[i] является объектом, следовательно, allBooks[i].length не определено, поскольку length не является свойством или методом объекта:).

Тем не менее, нет необходимости проходить allBooks (обратите внимание, что есть много способов добиться того, что вы пытаетесь). Вот мой выстрел в это.

Вам просто нужно получить входной текст и проверить его по названию и имени автора (что я не смог найти в вашем вопросе, поэтому этот ответ работает только с названиями книг).

Названия книг показаны внутри каждого span.bookTitle, так что это первое, что вы должны кешировать в переменной. Обратите внимание, что их кэширование с самого начала поможет снизить производительность при наличии большого количества книг, избавляя от необходимости запрашивать DOM при каждом нажатии клавиши, НО не забывайте обновлять этот кэш, если вы планируете динамически добавлять книги в список.

Тогда вам просто нужно пройти эти span s и проверить их текстовое содержимое, это forEach . Затем каждый раз, когда вы находите совпадение, вы показываете / скрываете предка span, который соответствует .flipper.

И последнее, но не менее важное: я рекомендую не включать события в ваш html, попробуйте прикрепить их в JS, также не используйте для этого keyup, потому что он будет обрабатывать ненужные нажатия клавиш, такие как Shift, Ctrl и т. Д., Если только это не то, что вы хотите ..., если не идти с input.

Е.И.В.

(()=>{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>