Add Search Bar on the picker list SwiftUI - swift

Question

I tap on picker it will open screen with list of element on that screen, can we add Search Bar?
I implemented Country Picker, in the country list I am showing country name and country code so on that list screen add Search bar find out country easily.
struct ContentView: View {
//All Country get from the plist with country Code and Coutnry Name.
let countyList = Country().getAllCountyInfo()
// Selected Country
#State private var selectedCountry = 0
var body: some View {
NavigationView {
Form {
Picker(selection: $selectedCountry, label: Text("Country")) {
ForEach(countyList) { country in
HStack{
Text(country.countryName ?? "")
Spacer()
Text(country.countryCode ?? "")
}
}
}
}
.navigationBarTitle("Select country picker")
}
}
}
by run above code it will open a country list like above screen.
on the above screen (country list).
How can I add search bar to filter country data?

Answer 1

yes you can!
SearchBar code:
struct SearchBar: View {
#Binding var text: String
#State var isEditing: Bool = false
#ObservedObject var vc = VC()
var body: some View {
HStack {
TextField("Search Countries", text: $text)
.padding(7)
.padding(.horizontal, 25)
.background(Vc.color2)
.cornerRadius(8)
.overlay(
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
.padding(.leading, 8)
if isEditing {
Button(action: {
self.text = ""
}) {
Image(systemName: "multiply.circle.fill")
.foregroundColor(.gray)
.padding(.trailing, 8)
}
}
}
)
.padding(.horizontal, 10)
.onTapGesture {
self.isEditing = true
}
if isEditing {
Button(action: {
UIApplication.shared.endEditing(true)
self.isEditing = false
self.text = ""
}) {
Text("Cancel")
}
.padding(.trailing, 10)
.transition(.move(edge: .trailing))
.animation(.default)
}
}
}
}
extension UIApplication {
func endEditing(_ force: Bool) {
self.windows
.filter{$0.isKeyWindow}
.first?
.endEditing(force)
}
}
struct ResignKeyboardOnDragGesture: ViewModifier {
var gesture = DragGesture().onChanged{_ in
UIApplication.shared.endEditing(true)
}
func body(content: Content) -> some View {
content.gesture(gesture)
}
}
extension View {
func resignKeyboardOnDragGesture() -> some View {
return modifier(ResignKeyboardOnDragGesture())
}
}
Picker with Search Bar:
struct locc: View {
#State var locationsSelection: [String] = //Your Array
#State var searchText = ""
#State var locationSelection: Int = 0
var body: some View {
Picker(selection: $locationSelection, label: Text("Country")) {
SearchBar(text: $searchText)
if self.searchText != "" {
ForEach(0..<locationsSelection.filter{$0.hasPrefix(searchText)}.count) {
Text(locationsSelection.filter{$0.hasPrefix(searchText)}[$0]).tag($0)
}.resignKeyboardOnDragGesture()
}else if self.searchText == "" {
ForEach(0..<locationsSelection.count) {
Text(locationsSelection[$0]).tag($0)
}.resignKeyboardOnDragGesture()
}
}
}
}
Note: I am using the locc struct in another view containing the Form.

Answer 2

I solve this in my blog post here: https://roddy.io/2020/09/07/add-search-bar-to-swiftui-picker/
Create the UIViewRepresentable:
struct SearchBar: UIViewRepresentable {
#Binding var text: String
var placeholder: String
func makeUIView(context: UIViewRepresentableContext<SearchBar>) -> UISearchBar {
let searchBar = UISearchBar(frame: .zero)
searchBar.delegate = context.coordinator
searchBar.placeholder = placeholder
searchBar.autocapitalizationType = .none
searchBar.searchBarStyle = .minimal
return searchBar
}
func updateUIView(_ uiView: UISearchBar, context: UIViewRepresentableContext<SearchBar>) {
uiView.text = text
}
func makeCoordinator() -> SearchBar.Coordinator {
return Coordinator(text: $text)
}
class Coordinator: NSObject, UISearchBarDelegate {
#Binding var text: String
init(text: Binding<String>) {
_text = text
}
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
text = searchText
}
}
}
And then it's easy to embed it in your Picker:
struct FormView: View {
let countries = ["Brazil", "Canada", "Egypt", "France", "Germany", "United Kingdom"]
#State private var pickerSelection: String = ""
#State private var searchTerm: String = ""
var filteredCountries: [String] {
countries.filter {
searchTerm.isEmpty ? true : $0.lowercased().contains(searchTerm.lowercased())
}
}
var body: some View {
NavigationView {
Form {
Picker(selection: $pickerSelection, label: Text("")) {
SearchBar(text: $searchTerm, placeholder: "Search Countries")
ForEach(filteredCountries, id: \.self) { country in
Text(country).tag(country)
}
}
}
}
}
}