From c65cce9de7e27adc54c21ed078e17d2740504e33 Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Sat, 20 Dec 2025 23:26:35 +0200
Subject: [PATCH] Add auto complete

---
 frontend/src/components/GroceryLists.jsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/GroceryLists.jsx b/frontend/src/components/GroceryLists.jsx
index ac44e05..dd9f0be 100644
--- a/frontend/src/components/GroceryLists.jsx
+++ b/frontend/src/components/GroceryLists.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import AutocompleteInput from "./AutocompleteInput";
 import {
   getGroceryLists,
   createGroceryList,
@@ -31,6 +32,15 @@ function GroceryLists({ user, onShowToast }) {
   const [editItems, setEditItems] = useState([]);
   const [newItem, setNewItem] = useState("");
 
+  // Extract unique items from all lists for autocomplete
+  const uniqueItems = Array.from(
+    new Set(
+      lists.flatMap(list => 
+        list.items.map(item => item.startsWith("✓ ") ? item.substring(2) : item)
+      ).filter(Boolean)
+    )
+  ).sort();
+
   useEffect(() => {
     loadLists();
   }, []);
@@ -352,12 +362,18 @@ function GroceryLists({ user, onShowToast }) {
               <div className="form-group">
                 <label>פריטים</label>
                 <div className="add-item-row">
-                  <input
+                  <AutocompleteInput
                     type="text"
                     placeholder="הוסף פריט..."
                     value={newItem}
                     onChange={(e) => setNewItem(e.target.value)}
-                    onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), handleAddItem())}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleAddItem();
+                      }
+                    }}
+                    suggestions={uniqueItems}
                   />
                   <button type="button" className="btn primary" onClick={handleAddItem}>
                     הוסף