Let user search items from a List in SwiftUI

In this tutorial, we will see how to let users search items from a List in SwiftUI.

We can create a simple search functionality for a list in SwiftUI using the List and TextField components.

The List will display a collection of items and in the TextField we can type our search query. As we type in the TextField, it dynamically filters the list based on the entered text.

Now, follow the steps below to achieve this task.

Declare a @State Property Wrapper

First of all, I will create a @State property wrapper, that will represent the text entered in the search field.

@State private var searchText = ""

In the above code, I have declared a property using the @State called searchText, which is a string that will hold the text entered into the search field. The @State property wrapper will allow SwiftUI to track and update the view whenever this value changes.

Filtering Logic

Now, I will define a computed property that will filter the array of strings (items) based on a search text (searchText).

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

The above computed property will filter the items array based on the searchText. If searchText is empty, it will return the entire items array. Otherwise, it will filter the items to include only those that contain the searchText string.

Create TextField for Search

Now, I will create a TextField where users can enter text to search from the List.

TextField("Search", text: $searchText)
    .padding(12)
    .background(Color(.systemGray6))
    .cornerRadius(10)
    .padding(.horizontal, 16)
    .padding(.vertical, 8)
    .frame(height: 50)

In the above program, I have created a TextField for searching. The text of the TextField is bound to the searchText property using $searchText.

So, when the user types something into the TextField, it will directly modify the searchText property.

ForEach for Displaying Items

We can use the ForEach loop to iterate through the filteredItems array and display each item in a Text view within the list.

ForEach(filteredItems, id: \.self) { item in
    Text(item)
}

The above  ForEach loop will iterate through the filteredItems array and display each item in a Text view within the list. The id: \.self is used to identify each item uniquely.

Now, have a look at the complete code below.

import SwiftUI

struct ContentView: View {
    @State private var searchText = ""
    let items = ["Apple", "Banana", "Cherry", "Grapes", "Orange"]
    
    // Computed property to filter items based on the search text
    var filteredItems: [String] {
        // If the search text is empty, show all items; otherwise, filter based on the entered text (case-insensitive)
        searchText.isEmpty ? items : items.filter { $0.localizedCaseInsensitiveContains(searchText) }
    }

    var body: some View {
        NavigationView {
            List {
                // TextField for entering search text
                TextField("Search", text: $searchText)
                    .padding(12)
                    .background(Color(.systemGray6))
                    .cornerRadius(10)
                    .padding(.horizontal, 16)
                    .padding(.vertical, 8)
                    .frame(height: 50) // Adjust the height of the search box
                
                // Display filtered items in the List using ForEach
                ForEach(filteredItems, id: \.self) { item in
                    Text(item) // Display each item as a Text element
                }
            }
            .navigationTitle("Searchable List")
        }
    }
}

The above SwiftUI code will create a simple searchable list where users can enter text in the search field, and the list will update dynamically based on the entered text and display items that match the search criteria.

Output: