Add products search function

index.html

@@ -90,6 +90,7 @@
             type="text"
             id="Search"
             placeholder="Search"
+            x-bind="shop.searchText"
             class="w-full pl-2.5 py-2.5 pe-10 sm:text-sm rounded-md border-gray-200 shadow"
             @focus="!shop.products.length && shop.loadProducts(); menuOpen = true"
             @blur="menuOpen = false"
@@ -101,12 +102,12 @@
             </button>
           </span>
           <div
-            x-data="shop.products"
-            x-show="menuOpen && shop.products.length"
+            x-data="shop.filterProducts"
+            x-show="menuOpen && shop.filterProducts.length"
             class="absolute right-0 top-14 z-50 w-72 rounded-md border border-gray-100 bg-white shadow-lg"
           >
             <ul class="max-h-64 space-y-1 overflow-auto p-2">
-              <template x-for="product in shop.products" :key="product.name">
+              <template x-for="product in shop.filterProducts" :key="product.name">
                 <li>
                   <a
                     class="flex items-center justify-between rounded-md px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:bg-gray-50"

src/app.js

@@ -87,6 +87,12 @@ const shop = {
   products: [
     // { name, category, href, description, price }
   ],
+  searchText: '',
+  get filterProducts() {
+    return this.searchText
+      ? this.products.filter(product => product.name.includes(this.searchText))
+      : this.products;
+  },
   async loadProducts() {
     this.products = await utils.fetchData(api);
   },