Searching in SwiftUI with Searchable

Search functionality is a common feature in many apps, and SwiftUI makes it easy to add search functionality to a list with the searchable modifier.

With just a few lines of code, we can allow users to search through a list of items and find what they’re looking for quickly and easily.

In this post, we’ll create a simple list of fruits and add search functionality to it using the searchable modifier. We’ll also take a look at how the searchable modifier works behind the scenes.

How searchable Works

The searchable modifier is used to add search functionality to a view in SwiftUI. When applied to a view, it adds a search bar to the top of the view that allows users to enter a search query.

Under the hood, the searchable modifier creates a UISearchController on iOS and a NSSearchField on macOS. These search controllers are responsible for handling user input and displaying search results.

When the user enters a search query, the searchable modifier calls the onSubmit(of:search:) closure, passing in the search query. This closure is responsible for performing the search and updating the view with the search results.

The searchable modifier also takes an optional placement parameter, which determines where the search bar is displayed. By default, the search bar is displayed at the top of the view, but it can also be displayed in the navigation bar or as a separate view.

Now that we have an understanding of how the searchable modifier works, let’s take a look at how to use it in our SwiftUI app.

Adding Search Functionality to a List

First, let’s create a list of fruits to search through:

struct Fruit: Identifiable {
    let id = UUID()
    let name: String
}

let fruits = [
    Fruit(name: "Apple"),
    Fruit(name: "Banana"),
    Fruit(name: "Cherry"),
    Fruit(name: "Grape"),
    Fruit(name: "Kiwi"),
    Fruit(name: "Mango"),
    Fruit(name: "Orange"),
    Fruit(name: "Pineapple"),
    Fruit(name: "Strawberry"),
    Fruit(name: "Watermelon")
]

Next, let’s create a List view to display the fruits:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(fruits) { fruit in
                Text(fruit.name)
            }
            .navigationTitle("Fruits")
        }
    }
}

This will display a simple list of fruits in a navigation view.

To add search functionality, we need to apply the searchable modifier to the List view:

struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        NavigationView {
            List(fruits.filter { searchText.isEmpty ? true : $0.name.localizedCaseInsensitiveContains(searchText) }) { fruit in
                Text(fruit.name)
            }
            .navigationTitle("Fruits")
            .searchable(text: $searchText)
        }
    }
}

Here, we’ve added a @State variable called searchText to hold the search query. We’re also using the filter method on the fruits array to filter the list based on the search query. We’re using localizedCaseInsensitiveContains to perform a case-insensitive search.

Finally, we’re applying the searchable modifier to the List view and passing in the searchText variable as the text parameter. This will display a search bar at the top of the view that allows users to enter a search query.

struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        NavigationView {
            List(fruits.filter { searchText.isEmpty ? true : $0.name.localizedCaseInsensitiveContains(searchText) }) { fruit in
                Text(fruit.name)
            }
            .navigationTitle("Fruits")
            .searchable(text: $searchText)
        }
    }
}

And that’s it! With just a few lines of code, we’ve added search functionality to our list of fruits in SwiftUI.

Conclusion

In this tutorial, we saw how to add search functionality to a list in SwiftUI using the searchable modifier.

Searchable in SwiftUI

By adding search functionality to our app, we can make it easier for users to find what they’re looking for and improve the overall user experience.

Thank you for reading this far!