如何实现按标签缩小当前搜索结果的过滤器？

Question

所以我的客户希望为他们的食谱提供过滤选项（这是一个由食谱文章组成的博客）。到目前为止，通过添加“博客/食谱/标记/早餐”在网站名称之后。现在这是我遇到麻烦的地方，我希望有诸如“无麸质”或“古”之类的单选框选项，允许用户进一步缩小当前搜索结果的范围。例如，如果用户点击“早餐”并希望缩小当前显示的食谱范围，他只需点击“无麸质”等选项之一即可。

我已经将所有单选框选项布置在我希望它们位于膳食类型链接下的位置。但是，我不知道如何创建这种过滤功能来缩小当前显示的食谱文章的范围，有人可以指出我正确的方向吗？提前致谢。

<div class="div-container" style = "display: flex; width: 45%; height: auto; margin-left: auto; margin-right: auto;">

   <div class = "filter-content"> 
     <p class = "meal-type">Meal Type</p>
     <ul>
       <!-- Meal Types Go Here -->
       <li class = "meal-item"><a href="https://website.com/blogs/recipes">All Recipes</a></li>
       <li class = "meal-item"><a href="https://website.com/blogs/recipes/tagged/breakfast">Breakfast</a></li>
       <li class = "meal-item">Lunch</li>
       <li class = "meal-item"><a href="https://website.com/blogs/recipes/tagged/dinner">Dinner</a></li>
       <li class = "meal-item"><a href="https://website.com/blogs/recipes/tagged/snack">Snacks</a></li>
       <li class = "meal-item"><a href="https://website.com/blogs/recipes/tagged/dessert">Dessert</a></li>
     </ul>

     <p class = "filter-by">Filter by</p>
     <!-- Filter Options Go Here -->  
     <input type="radio" id="RecipeFilterOptions" name="recipe[FilterOptions]" value="beet powder"/> beet powder
     <br>
     <input type="radio" id="RecipeFilterOptions" name="recipe[FilterOptions]" value="easy"/> easy
     <br>
     <input type="radio" id="RecipeFilterOptions" name="recipe[FilterOptions]" value="gluten free"/> gluten free
     <br>
     <input type="radio" id="RecipeFilterOptions" name="recipe[FilterOptions]" value="paleo"/> paleo
   </div>

Answer 1

你是吗

• 手动创建仅包含搜索的新端点（不可维护）
• 或
• 您是否有一个包含所有这些信息的数据存储区并且您只是过滤以显示？

我们需要查看数据本身，以及您当前的过滤方式以便能够提供适当的帮助，但这里是一个粗略的过滤示例。

const meals = [{
    name: 'chicken parmesan',
    mealType: ['dinner'],
    attributes: [],
  },
  {
    name: 'bacon',
    mealType: ['breakfast', 'lunch', 'dinner'],
    attributes: [],
  },
  {
    name: 'uncooked rock',
    mealType: ['dinner'],
    attributes: ['paleo'],
  },
  {
    name: 'uncooked spinach',
    mealType: ['breakfast'],
    attributes: ['paleo']
  }
]

const filterMeals = (opts) => {
  const {
    mealType,
    attributes
  } = opts;
  let filteredMeals = meals
  if(mealType) {
    filteredMeals = filteredMeals.filter(obj => obj.mealType.includes(mealType));
  }
  if (attributes) {
    for (let i = 0; i < attributes.length; i++) {
      filteredMeals = filteredMeals.filter(obj => obj.attributes.includes(attributes[i]))
    }
  }
  console.log(filteredMeals);
}

filterMeals({
  mealType: 'dinner',
  attributes: ['paleo'],
});

filterMeals({
  mealType: 'dinner',
})

filterMeals({
  attributes: ['paleo'],
})