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 }) {
- setNewItem(e.target.value)} - onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), handleAddItem())} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + handleAddItem(); + } + }} + suggestions={uniqueItems} />