A SwiftUI Search Bar — Part 1
Write a SwiftUI search bar just in plain SwiftUI without wrapping UIKit components like UISearchBar.
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.
Note: If you look for a solution to use the UISearchBar of the UIKit in SwiftUI, I recommend the articles from Yugantar Jain and Axel Hodler.
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.
And a 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 publishedFruits.
For the initialization of publishedFruits we simply write the class initializer init() and assign fruits to 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 publishedFruits.
Connect them
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.
That’s all
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
Source Code: https://github.com/soeren-kirchner/SearchBarSwiftUI-Part1
