title: What is an efficient way to search through an array of recipes and match multiple words on some ingredients list
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var mockRecipes = [{
    "name": "PUMPKIN PEANUT BUTTER CHICKEN SOUP",
    "ingredientsByCategory": [{
        "category": "ingredients",
        "ingredients": [
          "1 (15 ounce) can light coconut milk",
          "1 (15 ounce) can pumpkin puree",
          "1 ½ cups low-sodium chicken broth",
          "½ cup natural creamy peanut butter (just peanuts + salt as the ingredients)"
          "1 tablespoon freshly grated ginger",
          "3 cloves garlic, minced",
          "½ teaspoon cayenne (use only ¼ teaspoon if you don’t like things as spicy)",
          "½ teaspoon salt",
          "Freshly ground black pepper",
          "1 ½ pounds boneless skinless chicken breast",
          "1 yellow onion, diced"
        ]
      },
      {
        "category": "for serving",
        "ingredients": [
          "Fresh chopped cilantro",
          "Roasted chopped peanuts",
          "Cooked brown rice"
        ]
      }
    ],
  }];</code></pre>
  </div>
  </div>
  </p>
  <p>Given the structure above, I would like to have a search input to search recipes by name or by ingredients(whatever is in the ingredients lists). The following searching should either return this recipe or not;</p>
  <pre><code>Input: pum pe but chi -&gt; returns true because it matches the name
  Input: pum pe buts chi -&gt; returns false
  Input: coco puree butter cilant -&gt; returns true
  Input: cilantro beans -&gt; returns false
  Input: co be rice cilant roast yellow 1 -&gt; returns true
  </code></pre>
  <p>Just looking for a general direction on what is the best way to implement this without brute force. All in the frontend</p>