我目前正在尝试从显示菜单项的数组中返回一些数据到我的搜索栏中

Question

I am currently trying to create a search bar to make it easy on my users so that they can type in the first letter of any ingredient such as "A" and it returns every ingredient item that is associated with that item. Such as "Avocado"

So far I have only created the array of ingredients . I am kind of new to coding so I am not sure how to get this filter list started.

Here's a brief explanation of my ingredient array

const ingredients: any = `{
  "ingredients" : [
  {
     "ingredient" : "Avocado",
      "category" : "Prepped"
      "servings" : 35
 },
 {
     "ingredient" : "Chopped Bacon",
     "category" : "No Prep",   
      "servings" : 40,
 }
    ]

]

My expected results are for the user to type in "a" into the search bar and ingredients from the menu will pop up such as... "Avocados", "Arugula", "Apples" etc. Please keep in mind my menu is collapsible. So how will this work?

Answer 1

Write filter using array.filter and provide customer input to it. Documentation is here