Implement a Search Bar in SwiftUI
Search through your data to find exactly what you need

Step 1: How To Create Your SwiftUI Project
In Xcode, go to File → New → Project → Single View App → Next → Select User Interface → SwiftUI → Next → Select your desired project location → Done.
Step 2: ContentView.swift
The default SwiftUI(ContentView) file will come up with the following code:
import SwiftUIstruct ContentView: View {var body: some View {
Text(”Hello World!”)
}
}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
On the right-hand side, you can see the preview of the UI.
If you’re not able to see the preview, go to the Adjust Editor option, and select Canvas (or press option+CMD+enter). After that, make sure the canvas is showing the UI preview.

Step 3: Creating a User Interface
Inside the ContentView body, we’ll be doing the following things:
- Initializing a string-array variable
- Defining the
NavigationViewand naming thenavigationBarTitle - Defining a list inside
NavigationView - The list will display a text containing names from a string array
So our code will look something like this:
import SwiftUIstruct ContentView: View {let names = [“Raju”, “Ghanshyam”, “Baburao Ganpatrao Apte”, “Anuradha”, “Kabira”, “Chaman Jhinga”, “Devi Prasad”, “Khadak Singh”]var body: some View {
NavigationView{
List {
ForEach(self.names, id: \.self) { name in
Text(name)
}
}
.navigationBarTitle(Text(“Search Bar”))
}
}
}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Step 4: Creating a Search Bar
Now the question is: How are you going to show a UISearchBar?
So to display a UISearchBar, we’re going to use the UIViewControllerRepresentable protocol.
struct SearchBar : UIViewRepresentable {}
Now, we have to implement the protocol methods, which are updateUIViewController, makeCoordinator, and makeUIViewController.
//Update UIViewcontrolleer Method
func updateUIViewController(_ uiViewController:
UIImagePickerController,
context: UIViewControllerRepresentableContext<SearchBar>)
{
}//Make Coordinator which will commnicate with the Search bar
func makeCoordinator(){}// Create UIViewController which we will display inside the View of the UIViewControllerRepresentable
func makeUIViewController(context: UIViewControllerRepresentableContext<SearchBar>)
{}
Since we have implemented all the methods of the protocol UIViewControllerRepresentable, let’s create an UISearchBar inside the makeUIViewController method.
func makeUIView(context: UIViewRepresentableContext<SearchBar>) -> UISearchBar {let searchBar = UISearchBar(frame: .zero)
searchBar.delegate = context.coordinator
return searchBar}
Step 5: Creating a UI Search Bar Coordinator
Now we have to create a coordinator that can communicate between the UIViewControllerRepresentable and the UISearchBar delegate methods.
So we’ll create a new class, Cordinator, that will implement the protocol NSOBject and UISearchBarDelegate and will implement the methods required by these protocols.
The coordinator will look something like this:
class Cordinator : NSObject, UISearchBarDelegate {func searchBar(_ searchBar: UISearchBar,
textDidChange searchText: String)
{
// Pass searchText value to the content view
}}
Now, if the user types anything, we have to notify our ContentView to show the filtered result.
For that, we’ll use the concept of the @Bindingand @State. We’ll create one Binding variables named text, so now our ImagePickerCordinator will look like this:
class Cordinator : NSObject, UISearchBarDelegate {@Binding var text : Stringinit(text : Binding<String>)
{
_text = text
}func searchBar(_ searchBar: UISearchBar,
textDidChange searchText: String)
{
text = searchText
}}
Now that our coordinator is ready to communicate, let’s make the changes into the UIViewControllerRepresentable makeCoordinator() function.
func makeCoordinator() -> SearchBar.Cordinator {
return Cordinator(text: $text)
}To pass the binding variables in, we’ll create this variable in the UIViewControllerRepresentable. Now the UIViewControllerRepresentable file will look something like this:
import SwiftUIstruct SearchBar : UIViewRepresentable {
@Binding var text : String
func searchBar(_ searchBar: UISearchBar,
textDidChange searchText: String) {
text = searchText
}
}func makeCoordinator() -> SearchBar.Cordinator {
return Cordinator(text: $text)
}func makeUIView(context: UIViewRepresentableContext<SearchBar>)
-> UISearchBar {
let searchBar = UISearchBar(frame: .zero)
searchBar.delegate = context.coordinator
return searchBar
}func updateUIView(_ uiView: UISearchBar,
context: UIViewRepresentableContext<SearchBar>) {
uiView.text = text
}
}
Step 7: Implement UISearchBar in ContentView
Inside the contentView, we just have to create@State variables, named searchTerm of type String.
We have to filter the list whenever the searchTerm variable value updates. For that, we’ll use the default filter method for a String array.
We have to call SearchBar UIViewControllerRepresentable inside the list; while calling the SearchBar, we have to pass the binding variable. And that’s it — we’re good to go.
So our ContentView code will look like this:
import SwiftUIstruct ContentView: View {let names = [“Raju”, “Ghanshyam”, “Baburao Ganpatrao Apte”, “Anuradha”, “Kabira”, “Chaman Jhinga”, “Devi Prasad”, “Khadak Singh”]@State private var searchTerm : String = “”var body: some View {
NavigationView{
List {
SearchBar(text: $searchTerm)
ForEach(self.names.filter{
self.searchTerm.isEmpty ? true : $0.localizedStandardContains(self.searchTerm)
}, id: \.self) { name in
Text(name)
}
}
.navigationBarTitle(Text(“Search Bar”))}
}
}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Resources
You can find this project on GitHub.

