Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect live changes on TextField in SwiftUI?

I have a simple TextField that binds to the state 'location' like this,

TextField("Search Location", text: $location) 

I want to call a function each time this field changes, something like this:

TextField("Search Location", text: $location) {    self.autocomplete(location) } 

However this doesn't work. I know that there are callbacks, onEditingChanged - however this only seems to be triggered when the field is focussed.

How can I get this function to call each time the field is updated?

like image 748
dylankbuckley Avatar asked Sep 10 '19 17:09

dylankbuckley


2 Answers

You can create a binding with a custom closure, like this:

struct ContentView: View {     @State var location: String = ""      var body: some View {         let binding = Binding<String>(get: {             self.location         }, set: {             self.location = $0             // do whatever you want here         })          return VStack {             Text("Current location: \(location)")             TextField("Search Location", text: binding)         }      } } 
like image 60
kontiki Avatar answered Oct 01 '22 13:10

kontiki


SwiftUI 2.0

From iOS 14, macOS 11, or any other OS contains SwiftUI 2.0, there is a new modifier called .onChange that detects any change of the given state:

struct ContentView: View {     @State var location: String = ""      var body: some View {         TextField("Your Location", text: $location)             .onChange(of: location) {                 print($0) // You can do anything due to the change here.                 // self.autocomplete($0) // like this             }     } } 

SwiftUI 1.0

For older iOS and other SwiftUI 1.0 platforms, you can use onReceive:

.onReceive(location.publisher) {      print($0) } 
**Note that** it returns **the change** instead of the entire value. If you need the behavior the same as the `onChange`, you can use the **combine** and follow the answer provided by @pawello2222.
like image 23
Mojtaba Hosseini Avatar answered Oct 01 '22 12:10

Mojtaba Hosseini