Introduction to Swift and iOS app development

To add a search or filter to our product list, we can update our Category file and then the MenuPage with a searchable modifier and a corresponding @State binding variable.

Category

struct Category: Decodable, Identifiable {
    var id: String { name }
    var name: String
    var products: [Product] = []
    
    func filteredItems(text: String) -> [Product] {
        if text.count > 0 {
            return items.filter({ item in
                item.name.contains(text)
            })
        } else {
            return items
        }
    }
}

MenuPage

// Add the State variable
@State var search: String = ""

 // Replace the ForEach
ForEach(menuManager.menu) { category in
    if category.filteredItems(text: search).count > 0 {
        Text(category.name)
        .listRowBackground(Color("Background"))
        .foregroundColor(Color("Secondary"))
        .padding()
    }
    
    ForEach(category.filteredItems(text: search)) { item in
        ZStack {
            NavigationLink(destination: DetailsPage(product: item)) {
                EmptyView()
            }.opacity(0)
            ProductItem(product: item)
                .padding(.top)
                .padding(.leading)
                .padding(.bottom, 12)

        }
        
    }
}

 // Add to the List
 .searchable(text: $search)