尝试使用 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);