Search with searchable modifier in iOS Swift - Mini App: Build & Ship

Build: Fruit Search Screen

This screen shows a list of fruits. The user can type in the search bar to filter the list by fruit names.

Target UI

-------------------------
| Search: [___________] |
|-----------------------|
| * Apple               |
| * Banana              |
| * Cherry              |
| * Date                |
| * Elderberry          |
| * Fig                 |
| * Grape               |
-------------------------

Display a list of fruit names in a vertical list

Add a search bar at the top using the searchable modifier

Filter the fruit list as the user types in the search bar

Show all fruits when the search text is empty

Starter Code

iOS Swift

import SwiftUI

struct FruitSearchView: View {
    let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"]
    @State private var searchText = ""

    var body: some View {
        NavigationView {
            List {
                // TODO: Show filtered fruits here
            }
            .navigationTitle("Fruits")
            // TODO: Add searchable modifier here
        }
    }
}

struct FruitSearchView_Previews: PreviewProvider {
    static var previews: some View {
        FruitSearchView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct FruitSearchView: View {
    let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"]
    @State private var searchText = ""

    var filteredFruits: [String] {
        if searchText.isEmpty {
            return fruits
        } else {
            return fruits.filter { $0.localizedCaseInsensitiveContains(searchText) }
        }
    }

    var body: some View {
        NavigationView {
            List(filteredFruits, id: \.self) { fruit in
                Text(fruit)
            }
            .navigationTitle("Fruits")
            .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .automatic), prompt: "Search fruits")
        }
    }
}

struct FruitSearchView_Previews: PreviewProvider {
    static var previews: some View {
        FruitSearchView()
    }
}

We keep the full list of fruits in a constant array. The searchText state variable holds what the user types in the search bar. We create a computed property filteredFruits that returns all fruits if the search text is empty, or only those fruits that contain the search text ignoring case.

The List shows the filtered fruits. We add the .searchable modifier to the list with a binding to searchText. This automatically adds a search bar in the navigation bar area. As the user types, the list updates to show matching fruits.

This approach uses SwiftUI's built-in searchable modifier for a simple and clean search UI.

Final Result

Completed Screen

-------------------------
| Search: [App_____]     |
|-----------------------|
| * Apple               |
-------------------------

User taps the search bar and types text

The list updates in real time to show fruits containing the typed text

Clearing the search text shows the full fruit list again

Stretch Goal

Add a clear button inside the search bar to quickly erase the search text

💡 Hint

Use the searchable modifier's 'prompt' parameter and customize the search bar with a clear button using the .searchable(text:placement:prompt:) modifier options