SwiftUI Tutorial: Searchable

Create a search bar with only few lines of code

Figure 1.

Before iOS 15, SwiftUI doesn’t have any built-in search modifier. The most common way to create one is by hard coding a search functionality on TextField, then creating a view that will display the search results. All of this will be a thing of the past when majority of Apple users moves to iOS 15 in the near future. Because there’s a more convenient way to create a search bar using searchable modifier.

This tutorial is part of my SwiftUI Tutorial series.

In this tutorial, we will attach a searchable modifier on a ForEach List View as shown in figure 1. Create a new project or open an existing one that you use for practice. You can use this link if you need a step-by-step process on how to do it.

Designing the UI

The tutorial assumes that you already have an understanding on how ForEach List and NavigationView works. If it’s your first time dealing with those mentioned topics, click their respective links for an in depth tutorial.

We will begin by setting up the structs that will handle the content. Write down this code outside ContentView:

struct Collections: Identifiable {
    var id = UUID()
    var name: String
    var image: String
}