How to Build Search Suggestions in SwiftUI

import SwiftUI

// MARK: - Model

struct Recipe: Identifiable {
    let id = UUID()
    let title: String
    let tag: String
}

// MARK: - ViewModel

@Observable
final class RecipeSearchViewModel {
    var query: String = ""
    var recentSearches: [String] = []

    let allRecipes: [Recipe] = [
        Recipe(title: "Avocado Toast", tag: "breakfast"),
        Recipe(title: "Pasta Primavera", tag: "dinner"),
        Recipe(title: "Berry Smoothie", tag: "breakfast"),
        Recipe(title: "Chicken Tacos", tag: "dinner"),
        Recipe(title: "Caesar Salad", tag: "lunch"),
        Recipe(title: "Banana Pancakes", tag: "breakfast"),
        Recipe(title: "Lentil Soup", tag: "lunch"),
    ]

    let popularTags = ["breakfast", "lunch", "dinner", "vegan", "quick"]

    var filteredRecipes: [Recipe] {
        guard !query.isEmpty else { return allRecipes }
        return allRecipes.filter {
            $0.title.localizedCaseInsensitiveContains(query) ||
            $0.tag.localizedCaseInsensitiveContains(query)
        }
    }

    var tagSuggestions: [String] {
        popularTags.filter { $0.localizedCaseInsensitiveContains(query) }
    }

    var recentSuggestions: [String] {
        recentSearches.filter { $0.localizedCaseInsensitiveContains(query) }
    }

    func commit(_ term: String) {
        query = term
        guard !recentSearches.contains(term) else { return }
        recentSearches.insert(term, at: 0)
        if recentSearches.count > 5 { recentSearches.removeLast() }
    }

    func clearRecents() { recentSearches.removeAll() }
}

// MARK: - View

struct RecipeSearchView: View {
    @State private var vm = RecipeSearchViewModel()

    var body: some View {
        NavigationStack {
            List {
                if vm.query.isEmpty {
                    Section("All Recipes") {
                        ForEach(vm.allRecipes) { recipe in
                            RecipeRow(recipe: recipe)
                        }
                    }
                } else {
                    Section("Results") {
                        ForEach(vm.filteredRecipes) { recipe in
                            RecipeRow(recipe: recipe)
                        }
                    }
                }
            }
            .listStyle(.insetGrouped)
            .searchable(
                text: $vm.query,
                placement: .navigationBarDrawer(displayMode: .always),
                prompt: "Search recipes or tags"
            )
            .searchSuggestions {
                // 1. Recent searches
                if !vm.recentSuggestions.isEmpty {
                    Section {
                        ForEach(vm.recentSuggestions, id: \.self) { term in
                            Label(term, systemImage: "clock")
                                .searchCompletion(term)
                        }
                    } header: {
                        Text("Recent")
                    }
                }

                // 2. Popular tag matches
                if !vm.tagSuggestions.isEmpty {
                    Section {
                        ForEach(vm.tagSuggestions, id: \.self) { tag in
                            Label(tag.capitalized, systemImage: "tag")
                                .searchCompletion(tag)
                        }
                    } header: {
                        Text("Tags")
                    }
                }

                // 3. Raw query catch-all
                if !vm.query.isEmpty {
                    Label("Search for \"\(vm.query)\"", systemImage: "magnifyingglass")
                        .searchCompletion(vm.query)
                        .foregroundStyle(.blue)
                }
            }
            .onSubmit(of: .search) {
                vm.commit(vm.query)
            }
            .navigationTitle("Recipes")
            .toolbar {
                if !vm.recentSearches.isEmpty {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button("Clear Recents") { vm.clearRecents() }
                            .font(.caption)
                    }
                }
            }
        }
    }
}

// MARK: - Supporting Views

struct RecipeRow: View {
    let recipe: Recipe
    var body: some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(recipe.title).font(.body)
            Text(recipe.tag.capitalized)
                .font(.caption)
                .foregroundStyle(.secondary)
        }
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(recipe.title), \(recipe.tag)")
    }
}

// MARK: - Preview

#Preview {
    RecipeSearchView()
}