I can't implement a search bar with this modelView

user_13028707 0
Viewed 44

I can't implement a search bar, I would like to do a search among the device.make but both with the old search bar and with the new searchable implementation I don't know how to do it.

If I had a normal array there are no problems but in this case with this modelView I always get errors.

struct MedicalView: View {
    
    init() {
        modelView.getData()
    }
    
    @ObservedObject  var modelView = DevicesViewModel()
    @State var searchText = ""
    @State private var showingAlert = false

    var searchMake: [String] { // 1
        if searchText.isEmpty {
            return modelView.devices
        } else {
            return modelView.devices.filter { $0.localizedCaseInsensitiveContains(searchText) }
        }
    }

    var body: some View {
        NavigationView {
            // ScrollView {
            VStack {
                List (modelView.devices) { device in
                    HStack {
                        VStack {
                            Text(device.make)
                                .font(.system(size: 20, weight: .heavy, design: .rounded))
                            Text(device.model)
                                .font(.system(size: 20, weight: .heavy, design: .rounded))
                                .foregroundColor(.white)
                                .shadow(color: .black, radius: 1)
                            Text(device.type)
                                .font(.system(size: 16, weight: .heavy, design: .rounded))
                                .foregroundColor(.blue)...

// .....
                   
                    }
                }
            }
        }.listStyle(.plain)
            .searchable(text: $searchText)
swiftui swift ios
1 Answers

You could try this approach as shown in this example code:

struct Device: Identifiable {
    let id = UUID()
    var make = ""
    var model = ""
    var type = ""
}

class DevicesViewModel: ObservableObject {
    @Published var devices: [Device] = []
    
    init() {
        getData() // <--- here
    }
    
    func getData() {
        devices = [Device(make: "1", model: "model1", type: "type1"),
                   Device(make: "2", model: "model2", type: "type2"),
                   Device(make: "3", model: "model3", type: "type3")]
    }
}

struct MedicalView: View {
    @StateObject var modelView = DevicesViewModel() // <--- here
    
    @State var searchText = ""
    @State private var showingAlert = false
    
    var searchMake: [Device] { // <--- here
        if searchText.isEmpty {
            return modelView.devices
        } else {
            return modelView.devices.filter{ $0.make.lowercased().localizedCaseInsensitiveContains(searchText.lowercased()) } // <--- here
        }
    }
    
    var body: some View {
        NavigationView {
            VStack {
                List (searchMake) { device in  // <--- here
                    HStack {
                        VStack {
                            Text("\(device.make)")
                                .font(.system(size: 20, weight: .heavy, design: .rounded))
                            Text("\(device.model)")
                                .font(.system(size: 20, weight: .heavy, design: .rounded))
                                .foregroundColor(.white)
                                .shadow(color: .black, radius: 1)
                            Text("\(device.type)")
                                .font(.system(size: 16, weight: .heavy, design: .rounded))
                                .foregroundColor(.blue)
                        }
                    }
                }
            }.listStyle(.plain)
             .searchable(text: $searchText)
        }
    }
}
user_119698170
Related