尝试使用 Vanillajavascript 创建搜索框/过滤器的问题

Question

在我正在做的 Javascript 练习中，除了从 Json 文件中创建一种书店之外，我还必须包含一个搜索字段，以按书名或作者姓名进行过滤。为此，我正在关注有关它的 W3school 教程，但我正在努力将其转换为我的代码。因为我不确定要循环哪些元素，等等...我将不胜感激任何帮助指导我正确的方向。这是我到目前为止编写的 Html 和 JS：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);