Search with searchable modifier in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Searchable Modifier Filtering Behavior

Given this SwiftUI code snippet using the searchable modifier, what will be the displayed list items when the user types "ap" in the search bar?

iOS Swift

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

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

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

A ["Grape", "Apricot"]

B ["Apple", "Banana", "Grape", "Apricot", "Orange"]

C ["Apple", "Apricot"]

D ["Banana", "Orange"]

💡 Hint

Think about how the filter uses localizedCaseInsensitiveContains with the search text.

The filter returns fruits that contain the substring "ap" ignoring case. "Apple" and "Apricot" both contain "ap" ignoring case, so only these two appear.

❓ lifecycle

intermediate

Search Text State Update Timing

In SwiftUI, when using the searchable modifier with a @State searchText variable, when does the searchText update as the user types?

A searchText updates only when the view reloads

B searchText updates only after the user presses Return

C searchText updates only when the search bar loses focus

D searchText updates immediately on every character typed

💡 Hint

Consider how SwiftUI binds the search bar text to the state variable.

The searchable modifier binds the search bar text to the @State variable, updating it immediately as the user types each character.

❓ navigation

advanced

Searchable Modifier with NavigationView

What is the correct way to add a searchable modifier to a list inside a NavigationView so that the search bar appears in the navigation bar on iOS?

iOS Swift

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

  var body: some View {
    NavigationView {
      List(items, id: \.self) { item in
        Text(item)
      }
      // Where to place searchable modifier?
    }
  }
}

A Place .searchable(text: $searchText) directly on the List inside NavigationView

B Place .searchable(text: $searchText) on the NavigationView itself

C Place .searchable(text: $searchText) outside NavigationView wrapping the whole view

D Place .searchable(text: $searchText) on the Text inside the List

💡 Hint

The searchable modifier must be attached to the view that produces the list content inside the navigation.

The searchable modifier should be applied to the List inside the NavigationView to show the search bar in the navigation bar area.

📝 Syntax

advanced

Correct Syntax for searchable Modifier with Prompt

Which option shows the correct syntax to add a searchable modifier with a prompt text "Search fruits" in SwiftUI?

A .searchable($searchText, placeholder: "Search fruits")

B .searchable(text: $searchText, prompt: "Search fruits")

C .searchable(text: searchText, prompt: "Search fruits")

D .searchable(text: $searchText, placeholder: "Search fruits")

💡 Hint

Check the parameter names and use of $ for binding.

The searchable modifier requires a binding to a String with $ and the prompt parameter is named prompt, not placeholder.

🔧 Debug

expert

Why Does Searchable Not Show Search Bar?

You added .searchable(text: $searchText) to your List inside a NavigationView, but the search bar does not appear on iOS 14. What is the reason?

A The searchable modifier is only available on iOS 15 and later

B You forgot to add a NavigationLink inside the List

C The searchText variable is not marked with @State

D The List must be wrapped in a VStack for searchable to work

💡 Hint

Check the iOS version compatibility of the searchable modifier.

The searchable modifier was introduced in iOS 15, so it does not work on iOS 14 or earlier versions.