In struct SearchFlights
Since .searchable() needs NavigationView, simply modified the text field to work as a searchField:
...
@State private var showListOfCities = false
@FocusState private var focusedField
...
TextField("Search cities", text: $city)
.background(Color.white.opacity(0.2))
.clipShape(RoundedRectangle(cornerRadius: 5))
.focused($focusedField)
.onSubmit(of: .text) {
Task {
runningSearch = true
showListOfCities = false
await flightData = FlightData.searchFlightsForCity(city)
runningSearch = false
}
}
.onChange(of: city) { newText in
showListOfCities = true
}
.onChange(of: focusedField) { clicked in
showListOfCities = clicked ? true : false
}
.popover(isPresented: $showListOfCities, arrowEdge: .bottom) {
VStack(alignment: .leading, spacing: 2) {
ForEach(FlightData.citiesContaining(city), id: \.self) { city in
Text(city).searchCompletion(city)
}
}
.padding()
.frame(minWidth: 150)
}