Intelligente Eingabefelder

Beschreibung

Diese View stellt intelligente Eingabefelder bereit, die während der Texteingabe kontextbezogene Vorschläge anzeigen. Beim Eintippen einer Adresse werden beispielsweise passende Orte mithilfe eines Autovervollständigungs-Mechanismus vorgeschlagen, der auf Standortdiensten basiert.

🔍 Zweck

• Schnelle Adresseingabe durch Vorschläge
• Autovervollständigung für Kontaktdaten in Formularen
• Auswahl von Lieferorten in Bestellprozessen
• Buchung von Veranstaltungsorten
• Unterstützung bei der Eingabe von Orten für Reiseplanungen

📄 Codebeispiel

import SwiftUI
import Combine

// Mocked location data for autocomplete suggestions
struct Location: Identifiable, Equatable {
    let id = UUID()
    let name: String
    let address: String
}

class LocationAutocompleteViewModel: ObservableObject {
    @Published var query: String = ""
    @Published var suggestions: [Location] = []
    
    // Mocked location database for demo purposes
    private let allLocations: [Location] = [
        Location(name: "Alexanderplatz", address: "Berlin, Germany"),
        Location(name: "Brandenburger Tor", address: "Berlin, Germany"),
        Location(name: "Central Park", address: "New York, USA"),
        Location(name: "Eiffelturm", address: "Paris, France"),
        Location(name: "Marienplatz", address: "Munich, Germany"),
        Location(name: "Colosseum", address: "Rome, Italy")
    ]
    
    private var cancellables = Set<AnyCancellable>()
    
    init() {
        $query
            .debounce(for: .milliseconds(200), scheduler: RunLoop.main)
            .removeDuplicates()
            .sink { [weak self] text in
                self?.updateSuggestions(for: text)
            }
            .store(in: &cancellables)
    }
    
    private func updateSuggestions(for text: String) {
        guard !text.isEmpty else {
            suggestions = []
            return
        }
        let lowerText = text.lowercased()
        suggestions = allLocations.filter {
            $0.name.lowercased().contains(lowerText) ||
            $0.address.lowercased().contains(lowerText)
        }
    }
}

struct IntelligentInputFieldView: View {
    @StateObject private var viewModel = LocationAutocompleteViewModel()
    @State private var selectedLocation: Location?
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("Adresse eingeben:")
                .font(.headline)
            
            TextField("Beispiel: Alexanderplatz...", text: $viewModel.query)
                .padding(10)
                .background(Color(.systemGray6))
                .cornerRadius(8)
                .autocapitalization(.words)
            
            if !viewModel.suggestions.isEmpty {
                VStack(alignment: .leading, spacing: 0) {
                    ForEach(viewModel.suggestions) { location in
                        Button(action: {
                            select(location)
                        }) {
                            HStack {
                                Image(systemName: "mappin.and.ellipse")
                                    .foregroundColor(.accentColor)
                                VStack(alignment: .leading) {
                                    Text(location.name).bold()
                                    Text(location.address)
                                        .font(.caption)
                                        .foregroundColor(.secondary)
                                }
                            }
                            .padding(8)
                        }
                        .buttonStyle(.plain)
                        Divider().padding(.leading, 32)
                    }
                }
                .background(Color(.systemBackground))
                .clipShape(RoundedRectangle(cornerRadius: 8))
                .shadow(radius: 2)
            }
            
            if let selected = selectedLocation {
                HStack(spacing: 8) {
                    Image(systemName: "location.fill")
                        .foregroundColor(.green)
                    VStack(alignment: .leading) {
                        Text("Ausgewählte Adresse:")
                            .font(.caption2)
                            .foregroundColor(.secondary)
                        Text("\(selected.name), \(selected.address)")
                            .fontWeight(.medium)
                    }
                }
                .padding(10)
                .background(Color.green.opacity(0.1))
                .cornerRadius(8)
            }
            
            Spacer()
        }
        .padding()
        .animation(.easeInOut, value: viewModel.suggestions.count)
    }
    
    private func select(_ location: Location) {
        selectedLocation = location
        viewModel.query = "\(location.name), \(location.address)"
        viewModel.suggestions = []
    }
}

#Preview {
    IntelligentInputFieldView()
}