Implement a Search Bar in SwiftUI

Search through your data to find exactly what you need

Mayur Rathod
Nov 6 · 4 min read

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:

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:

  1. Initializing a string-array variable
  2. Defining the NavigationView and naming the navigationBarTitle
  3. Defining a list inside NavigationView
  4. The list will display a text containing names from a string array

So our code will look something like this:


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.

Now, we have to implement the protocol methods, which are updateUIViewController, makeCoordinator, and makeUIViewController.

Since we have implemented all the methods of the protocol UIViewControllerRepresentable, let’s create an UISearchBar inside the makeUIViewController method.


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:

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:

Now that our coordinator is ready to communicate, let’s make the changes into the UIViewControllerRepresentable makeCoordinator() function.

To pass the binding variables in, we’ll create this variable in the UIViewControllerRepresentable. Now the UIViewControllerRepresentable file will look something like this:


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:


Resources

You can find this project on GitHub.

Better Programming

Advice for programmers.

Mayur Rathod

Written by

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade