This article will show how to implement a search bar in SwiftUI.
This article has two parts.
- Part 1 (this part) shows how to create a search bar functionality without any styling.
- Part 2 applies a cancel button and some basic styling and animation to the search bar to look similar to that in the Signal messenger app.
Start with a Basic App Showing a List
First, create a Project in Xcode. Select iOS and App and then select the following options.
Let’s now create a new Swift file named FruitsController.swift and add a
Fruits struct and a
FruitsController class that conforms to the
ObservableObject Protocol. The
FruitsController will work as the data provider.
FruitsView to the ContentView.swift that will observe the
FruitsController and shows the
publishedFruits published by it.
And of course, we have to add the
FruitsView to the
ContentView to be shown.
This short piece of code is a complete SwiftUI app showing our list of fruits. If you now run the app in the Simulator, this is what you get.
Add the Search Field
Next, let us add a
Textfield to the FruitsView as a search field on the top of our list. And wrap both within a
VStack. And we need to add a @State property
searchFieldValue in which the Textfield will store the user’s input into.
Prepare the FruitsController
The approach is, to keep all the search logic inside the Controller. It provides the data as well as what data will be exposed. Therefore let’s add a property
fruits containing all the original data and the
publishedFruits property for the published data. That simply means that the result of a search on
fruits will be stored in
For the initialization of
publishedFruits we simply write the class initializer init() and assign
publishedFruits. Both should of course be the same before any search is done.
In addition, we need to add a
search method, that filters all fruits containing the key and stores the result into
In the last step, we have to call the
search method if the user inputs a search term.
For the search, we implement the action of the
onChange method of the
TextField and call the
search method of the
FruitsController with the entered search term.
This is a small pure SwiftUI search bar app. No storyboard, no outlets, no UIViewControllerRepresentable, etc. Just a few lines of code, that shows the power of SwiftUI. But there is more
Part 2 will show how to add a little more styling, for a more real world application.
Next Part: A SwiftUI search bar — Part 2