How To Create A Swift UI Search Bar: Step-by-Step Guide

The Swift UI Search Bar is a vital component in any modern app, offering users an efficient way to find information. Whether you’re building an app for managing your tasks, browsing through a catalog, or keeping track of your next meal plans, an intuitive search interface can make all the difference.

In this blog, you’ll learn how to add a search bar to your app using SwiftUI, along with best practices for enhancing the search experience.

Let’s dive into a technical, step-by-step walkthrough, complete with examples and explanations of how to use searchable features in SwiftUI.

What Makes a Great Search Bar?

A well-designed search bar enhances usability by providing seamless navigation. Key features include a search text field for input, search suggestions to guide users, and the ability to filter data dynamically as the user types. Thanks to the SwiftUI framework, implementing these functionalities is both straightforward and efficient.

Step 1: Setting Up the Basics in SwiftUI

Start by creating a SwiftUI struct ContentView. To make the search field functional, you'll need a @State private var to track the user's search query. Here’s how you can set up the basic structure:

1import SwiftUI
2
3struct ContentView: View {
4    @State private var searchText: String = "" // State variable for search input
5
6    var body: some View {
7        NavigationView {
8            List {
9                // Placeholder for list content
10                Text("Example Item 1")
11                Text("Example Item 2")
12            }
13            .navigationTitle("Search Example")
14            .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .automatic))
15        }
16    }
17}

Key Points:

• The @State private var searchText serves as the state private variable for tracking input.
• The .searchable view modifier adds the search field to your navigation view.
• The .placement parameter customizes where the search bar appears.

Step 2: Using the Searchable Modifier to Add a Search Bar

The searchable view modifier is at the heart of implementing a search bar. By attaching it to a SwiftUI List or any view inside a navigation view, you enable users to search effectively.

Adding Search Suggestions

Search suggestions can make your search interface more user-friendly by predicting what the user types. You can achieve this by leveraging the suggestions parameter:

1.searchable(text: $searchText, placement: .navigationBarDrawer) {
2    ForEach(["Apple", "Banana", "Cherry"], id: \.self) { suggestion in
3        Text(suggestion).searchCompletion(suggestion)
4    }
5}

Here’s what happens:

• Searchable text is dynamically updated based on search suggestions.
• .searchCompletion helps filter data as the user taps a suggestion.

Step 3: Filtering Data with the User’s Search Query

To make the search bar functional, you’ll filter the displayed data based on the user's search query. Use a computed property to update the list dynamically:

1var filteredData: [String] {
2    let items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
3    return searchText.isEmpty ? items : items.filter { $0.contains(searchText) }
4}
5
6var body: some View {
7    List(filteredData, id: \.self) { item in
8        Text(item)
9    }
10    .searchable(text: $searchText)
11}

Key Points:

• The filteredData property filters the array of items based on the search text.
• The search field automatically updates as the user types, enhancing the search experience.

Step 4: Enhancing the Search Experience with Placement and Suggestions

Using the .placement parameter, you can refine the position of the search bar. For instance, in a split view app, you might place it in the sidebar placement:

1.searchable(text: $searchText, placement: .sidebar)

Incorporating search suggestions not only improves usability but also allows for a more intuitive search interface.

Step 5: Adding a Cancel Button and Clear Button

To ensure users have full control over the search experience, add a cancel button and a clear button:

1.searchable(text: $searchText, prompt: "Search for items")
2.toolbar {
3    Button("Cancel") {
4        searchText = "" // Reset search text
5    }
6}

This enhances the usability by allowing users to reset their search quickly.

Complete Example Code

Here’s a complete implementation of a Swift UI Search Bar with searchable text, suggestions, and data filtering:

1import SwiftUI
2
3struct ContentView: View {
4    @State private var searchText: String = ""
5
6    var filteredData: [String] {
7        let items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
8        return searchText.isEmpty ? items : items.filter { $0.contains(searchText) }
9    }
10
11    var body: some View {
12        NavigationView {
13            List(filteredData, id: \.self) { item in
14                Text(item)
15            }
16            .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .automatic)) {
17                ForEach(["Apple", "Banana", "Cherry"], id: \.self) { suggestion in
18                    Text(suggestion).searchCompletion(suggestion)
19                }
20            }
21            .navigationTitle("Fruit Search")
22            .toolbar {
23                Button("Cancel") {
24                    searchText = ""
25                }
26            }
27        }
28    }
29}

This source code demonstrates how to use SwiftUI to create a functional and user-friendly search bar.

The Bottom Line!

Integrating a Swift UI Search Bar into your app is both simple and powerful with the searchable view modifier and SwiftUI framework. By leveraging tools like searchable text, search suggestions, and filtering, you can significantly enhance the search experience for your users. Remember to test your search interface thoroughly to ensure it meets your app's requirements. Follow this guide, and you'll have a fully functional search bar ready to elevate your app.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.