接受字符串和书籍列表并返回与搜索输入匹配的所有书籍的函数

Question

`我一直在用头撞墙，我不知道从这里该去哪里。我正在尝试构建一个函数，该函数接受字符串和书籍列表，然后返回与搜索输入匹配的所有书籍。

它应该接收一组对象，然后过滤它们并吐出匹配项，但我不知道该去哪里。我对此比较陌生，很容易迷路，因此我们将不胜感激。

const books = [
{
  title: "The City We Became",
  author: "N. K. Jemisin",
  tags: ["fantasy", "fiction", "afrofutursim", "science fiction", "sci-fi"]
},
{
title: "The Catcher in the Rye",
author: "J. D. Salinger",
tags: ["fiction", "young adult", "YA", "realism", "coming of age", "classic"]
},
{
title: "The Hundred Thousand Kingdoms",
author: "N. K. Jemisin",
tags: ["fantasy", "fiction", "adventure", "series"]
},
{
title: "Sapiens: A Brief History of Humankind",
author: "Yuval Noah Harari",
tags: ["nonfiction", "history", "anthropology", "science", "sociology"]
},
{
title: "Behave: The Biology of Humans at Our Best and Worst",
author: "Robert M. Sapolsky",
tags: ["nonfiction", "anthropology", "science", "sociology", "biology"]
},
{
title: "The Parable of the Talents",
author: "Octavia Butler", 
tags: ["fiction", "dystopian", "science fiction"]
},
{
title: "1984",
author: "George Orwell", 
tags: ["fiction", "dystopian", "science fiction", "classics", "adult"]
},
{
title: "Remarkably Bright Creatures",
author: "Shelby Van Pelt",
tags: ["fiction", "mystery", "magical realism"]
},
{
title: "Crying in H Mart",
author: "Michelle Zauner",
tags: ["memoir", "nonfiction", "autobiography"]
},
{
title: "Wild: From Lost to Found on the Pacific Crest Trail",
author: "Cheryl Strayed",
tags: ["nonfiction", "memoir", "adventure", "travel"]
}
]

// Click handler for search button
const captureSearchValue = () => {
 let input = document.getElementById('search-bar').value;
return input;
};

const filterBooks = (books) => {
  let flattenedObj;
   const flattenedObjsArr = [];
   for (let obj = 0; obj < books.length; obj++) {
    const objValues = Object.values(books[obj]);
    flattenedObj = [objValues.flat()];
    flattenedObjsArr.push(flattenedObj)
   } 
   return flattenedObjsArr;
} 

console.log(filterBooks(books)) //returns all 10 books`

我应该展平对象，然后返回搜索的匹配项。这里的结果示例是搜索“fantasy”应该返回 2 个结果..但这会返回 10 个结果。

Answer 1

相反，浏览每本书并查看搜索输入是否与该书的任何属性匹配。这是代码的修改版本，用于根据搜索条件过滤书籍。

const books = [
  {
    title: "The City We Became",
    author: "N. K. Jemisin",
    tags: ["fantasy", "fiction", "afrofuturism", "science fiction", "sci-fi"]
  },
  // ... (other books)
];

// Click handler for search button
const captureSearchValue = () => {
  let input = document.getElementById('search-bar').value;
  return input.toLowerCase(); // Convert input to lowercase for case-insensitive search
};

const filterBooks = (books, searchInput) => {
  return books.filter((book) => {
    // Check if the search input is found in the book's title, author, or tags
    const searchString = searchInput.toLowerCase();
    return (
      book.title.toLowerCase().includes(searchString) ||
      book.author.toLowerCase().includes(searchString) ||
      book.tags.some((tag) => tag.toLowerCase().includes(searchString))
    );
  });
};

const searchBooks = () => {
  const searchInput = captureSearchValue();
  const filteredBooks = filterBooks(books, searchInput);
  console.log(filteredBooks);
};

// Example usage when the search button is clicked
document.getElementById('search-button').addEventListener('click', searchBooks);

filterBooks

是一个接受书籍数组以及搜索查询作为输入的函数。它使用

filter

函数迭代书籍，并生成满足搜索输入参数的书籍数组。当按下搜索按钮时，将调用

searchBooks

函数。它接受搜索查询，将其更改为小写以进行不区分大小写的搜索，然后根据查询过滤书籍。使用

includes

方法，过滤条件会检查是否在书名、作者或任何标签中找到搜索输入。