SwiftUI Search

A Search Interface can be easily created using the .searchable() view modifier applied to a NavigationSplitView or NavigationStack, or to a view within them.

Syntax

NavigationSplitView or NavigationStack
    .searchable(
        text: binding variable of text to search for,
        placement: position (optional),
        prompt: prompt text (optional)
    )

Here are a few of the placement property types:

• .automatic places the search box automatically, this is the default value.
• .sidebar places the search box in the sidebar.
• .toolbar places the search box in the toolbar.

prompt is the prompt text to show in the search box. This defaults to display “Search” if the prompt parameter is not used.

Example

The following example is a simple search interface. Two variables are declared:

• An empty string named searchText to hold the text for searches.
• A plants array containing plant names for the search to filter.

When the text in the search box is updated, searchText also updates, being bound by the .searchable()‘s text parameter $searchText. The code within the List checks whether to show a plant depending on the value of searchText.

import SwiftUI

struct SearchBoxListView: View {
    @State private var searchText=""
    let plants = ["Birch", "Daffodil", "Daisy", "Dandylion", "Fir", "Lily", "Oak", "Olive", "Rose", "Tulip"]

    var body: some View {
        NavigationStack {
            List(plants, id: \.self) { plant in
                if searchText.isEmpty || plant.contains(searchText) {
                    Text(plant)
                }
            }.navigationTitle("Plants 🌷🌱")
        }
        .searchable(
            text: $searchText,
            prompt: "What plant are you looking for?"
        )
    }
}

Copy to clipboard
Copy to clipboard

This will initially display:

If text is entered in the search box, the list will be filtered to contain only items that match the query text: