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

Practice

1. What does the searchable modifier do in a SwiftUI view?

easy

A. Removes all items from the list when typing.

B. Automatically sorts the list items alphabetically.

C. Changes the background color of the list.

D. Adds a search bar to filter content in lists or scroll views.

Solution

1. Step 1: Understand the purpose of searchable

   The searchable modifier adds a search bar UI element to a list or scroll view.

2. Step 2: Identify its effect on content

   It allows users to type text to filter or search through the displayed content.

3. Final Answer:

   Adds a search bar to filter content in lists or scroll views. -> Option D

4. Quick Check:

   searchable = search bar added [OK]

Hint: searchable always adds a search bar UI [OK]

Common Mistakes:

• Thinking searchable sorts items automatically
• Confusing searchable with styling modifiers
• Assuming searchable removes items without filtering

2. Which of the following is the correct syntax to add a searchable modifier with a binding to a @State variable named searchText?

easy

A. .searchable(searchText)

B. .searchable($searchText)

C. .searchable(text: $searchText)

D. .searchable(text: searchText)

Solution

1. Step 1: Recall the searchable syntax

   The searchable modifier requires a binding to a string, written as text: $variable.

2. Step 2: Match the correct binding syntax

   Using $searchText passes the binding, so the correct syntax is .searchable(text: $searchText).

3. Final Answer:

   .searchable(text: $searchText) -> Option C

4. Quick Check:

   Binding uses $ with variable name [OK]

Hint: Use $ to bind @State variable in searchable [OK]

Common Mistakes:

• Omitting the text: label
• Not using $ for binding
• Passing variable without binding

3. Given this SwiftUI code snippet, what will be displayed when the user types "ap" in the search bar?

struct ContentView: View {
  @State private var searchText = ""
  let fruits = ["Apple", "Banana", "Grape", "Apricot"]

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

  var body: some View {
    List(filteredFruits, id: \.self) { fruit in
      Text(fruit)
    }
    .searchable(text: $searchText)
  }
}

medium

A. ["Apple", "Apricot"]

B. ["Banana", "Grape"]

C. ["Apple", "Banana", "Grape", "Apricot"]

D. Empty list

Solution

1. Step 1: Understand filtering logic

   The filter checks if each fruit contains the search text "ap" ignoring case.

2. Step 2: Apply filter to fruits list

   "Apple" and "Apricot" contain "ap" (case-insensitive), "Banana" and "Grape" do not match exactly.

3. Final Answer:

   ["Apple", "Apricot"] -> Option A

4. Quick Check:

   Filter by contains "ap" = Apple, Apricot [OK]

Hint: Filter checks contains ignoring case [OK]

Common Mistakes:

• Including fruits that don't contain "ap"
• Ignoring case sensitivity
• Returning full list regardless of search

4. Identify the error in this SwiftUI code using searchable:

struct ContentView: View {
  @State var searchText = ""
  let items = ["One", "Two", "Three"]

  var filteredItems: [String] {
    items.filter { $0.contains(searchText) }
  }

  var body: some View {
    List(filteredItems, id: \.self) { item in
      Text(item)
    }
    .searchable(text: searchText)
  }
}

medium

A. Missing $ to bind searchText in searchable modifier.

B. filteredItems should be a @State variable.

C. List requires a ForEach instead of direct array.

D. searchText should be a constant, not @State.

Solution

1. Step 1: Check searchable binding syntax

   The searchable modifier requires a binding, so it must be text: $searchText, not text: searchText.

2. Step 2: Verify other code parts

   filteredItems is computed correctly, List accepts array with id, and searchText should be @State.

3. Final Answer:

   Missing $ to bind searchText in searchable modifier. -> Option A

4. Quick Check:

   Binding needs $ prefix [OK]

Hint: Always use $ for @State binding in searchable [OK]

Common Mistakes:

• Forgetting $ in searchable binding
• Making filteredItems @State unnecessarily
• Confusing List requirements

5. You want to create a searchable list of contacts where typing filters by first or last name. Which code snippet correctly implements this behavior?

struct Contact: Identifiable {
  let id = UUID()
  let firstName: String
  let lastName: String
}

struct ContentView: View {
  @State private var searchText = ""
  let contacts = [Contact(firstName: "John", lastName: "Doe"), Contact(firstName: "Jane", lastName: "Smith"), Contact(firstName: "Alice", lastName: "Johnson")]

  var filteredContacts: [Contact] {
    if searchText.isEmpty { return contacts }
    return contacts.filter { contact in
      contact.firstName.lowercased().contains(searchText.lowercased()) || contact.lastName.lowercased().contains(searchText.lowercased())
    }
  }

  var body: some View {
    List(filteredContacts) { contact in
      Text("\(contact.firstName) \(contact.lastName)")
    }
    .searchable(text: $searchText)
  }
}

hard

A. Filters contacts only by first name and ignores last name.

B. Filters contacts by first or last name ignoring case and updates list dynamically.

C. Filters contacts but does not ignore case, so search is case-sensitive.

D. Does not filter contacts and always shows full list.

Solution

1. Step 1: Analyze filtering logic

   The filter checks if either firstName or lastName contains the search text, ignoring case.

2. Step 2: Confirm UI updates with searchable

   The searchable modifier binds to $searchText, so typing updates the filteredContacts list dynamically.

3. Final Answer:

   Filters contacts by first or last name ignoring case and updates list dynamically. -> Option B

4. Quick Check:

   Filter by first or last name, case-insensitive [OK]

Hint: Filter with OR condition and ignore case for full search [OK]

Common Mistakes:

• Filtering only by first name
• Not using lowercased() causing case sensitivity
• Forgetting to bind searchText with $