Así que tengo una barra de búsqueda que busca libros de la API de Google Books y muestra los resultados en divs. Pero el problema es que cuando, por ejemplo, escribo "harry potter", no muestra nada, pero si escribo solo "harry", muestra algunos libros como se muestra a continuación:

Hay unos 10 libros más abajo, y ninguno de ellos contiene libros de Harry Potter. No sé cómo podría hacer que muestre todos los resultados que contienen una palabra en particular.

Mi código javascript:

 const searchBar = document.getElementById('search'); searchBar.addEventListener('keyup', (e) =>{ //event for searching books const searchString = e.target.value; searchBook(searchString); console.log(e.target.value); }) function searchBook(query){ //function for searching books by query const url = BASE_URL + `${query}` + '&' + API_KEY; fetch(url) .then(res => res.json()) .then(books => showBooks(books.items)); } showBooks = books =>{ //function for displaying books const main = document.getElementById('book_container'); main.innerHTML = ""; books.forEach(book => { title = book.volumeInfo.title; author = book.volumeInfo.authors; description = book.volumeInfo.description; img = book.volumeInfo.imageLinks.thumbnail; const bookEl = document.createElement('div'); bookEl.classList.add('book'); bookEl.innerHTML = ` <div class="book"> <img src="${img}"> <div class="book_info"> <h3>${title}</h3> <p>${author}</p> </div> </div> ` main.appendChild(bookEl); }); }; }

Y también hay a veces un siguiente error:

Tiene que ver con img = book.volumeInfo.imageLinks.thumbnail; , pero no sé por qué se muestra, porque a veces las imágenes se muestran bien y, a veces, aparece este error, aunque estoy bastante seguro de que mis propiedades están definidas.