How to create searchable picker menu in swiftUI

Question

I am finding to create picker menu with self contain search bar view and once user enter any character as per result of search filter picker menu will automatically reloads in SwiftUI.

Below is the code i tried searchBar is visible in menu list but, After taping on it is closing (behaving like menu selection) instead of focusing in text.

Group { Text("Select Bank") .font(.subheadline) .bold()

Picker("Link Bank Account", selection: $viewModel.selectedAccountProvider) {
                                
SearchBarView(text: $viewModel.searchBarText, placeholderText: "Search")
                                
  ForEach(viewModel.accountProviders, id:\.id) { provider in
     if let providerName = provider.name {
        Text(providerName).tag(provider.id)
        }
     }
  }

.tint(.black)
.pickerStyle(.menu)
.id(viewModel.accountProvidersPickerId)

}

The built-in picker can’t do this. You’d need to write most of the code yourself. Also consider using a text field with auto complete suggestions instead. — Sweeper
– Sweeper, Commented Mar 1, 2024 at 10:14

Roy Rodney · Accepted Answer · 2024-03-01 10:27:57Z

0

The picker doesn't expect any content that isn't meant to be selected. To get this sort of behaviour, put the search bar view outside of the picker, and handle the modal presentation yourself. e.g

Button(selection.name) {
        isPresentingPicker.toggle()
    }
    if isPresentingPicker {
        VStack {
            searchBarView
            pickerView
                .pickerStyle(.inline)
        }
    }

answered Mar 1, 2024 at 10:27

Roy Rodney

8442 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create searchable picker menu in swiftUI

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related