In this blog post, we’ll discuss the best practices for implementing the SwiftUI search bar and examples of apps that do it effectively. By following these best practices, you can make your app more user-friendly and help your users find the content they’re looking for quickly and easily. Let’s dive in

Download the project files

What is a search bar in iOS?

A search bar is a user interface element that allows users to search for specific content within an app. In iOS apps, the search bar is often positioned at the top of the screen, making it easy for users to locate and use. Users can type keywords or phrases into the search bar, and the app will display results that match the search criteria. Search bars are particularly useful in apps that have a large amount of content, such as music, video, or news apps, where users may want to find specific content quickly and easily. The SwiftUI framework includes a searchable view modifier that developers can use to implement this functionality in their apps.

How to add a SwiftUI search bar

Creating a search bar is quite easy. As an example, I will use a food delivery app. The following code defines a Meal model:

struct Meal: Codable, Hashable, Identifiable {

    let imageURL: String
    let id: String
    let category: MealCategory
    let name: String
    let location: String
    let rating: Double
    var tags: [String]
    
    static func preview() -> Meal {
        Meal(imageURL: "europian.jpg",
             id: "3",
             category: MealCategory.oceanian,
             name: "food name",
             location: "Africa",
             rating: 4,
             tags: ["Fast Food"])
    }
}

Instead of fetching the data from a server, I will use mocked data that I load from the bundle. The following code defines the view model that sets up the data array for meals:

class MealListViewModel: ObservableObject {

    @Published var meals = [Meal]()
    private let service = DataService()
    
    init() {
        meals = service.loadMealsFromDataStorage()
    }
}

I can then use the Meal data and show it in a SwiftUI List:

import SwiftUI

struct ContentView: View {

    @StateObject var viewModel = MealListViewModel()

    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.meals) { meal in
                   MealCardView(meal: meal)
                }
                .listRowSeparator(.hidden, edges: .all)
            }
            .listStyle(.plain)
            .navigationTitle("Find Your Next Meal")
        }
    }
}

Now we can add the search interface. First, you’ll need to create a state variable to hold the search query. I am going to add this to the view model.

class MealListViewModel: ObservableObject {
    @Published var meals = [Meal]()
    @Published var searchText: String = ""
    ...
}

Then, you can add a search bar to your app’s view hierarchy using the searchable view modifier, which takes a binding to a String type:

NavigationStack {
    List {
    ...
   }
   .searchable(text: $viewModel.searchText)
}

The list needs to be embedded inside a Navigation View, NavigationStackView, or NavigationSplitView, in order for the search text field to appear in the navigation bar.

import SwiftUI

struct ContentView: View {

    @StateObject var viewModel = MealListViewModel()

    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.meals) { meal in
                   MealCardView(meal: meal)
                }
                .listRowSeparator(.hidden, 
                                  edges: .all)
            }
            .listStyle(.plain)
            .navigationTitle("Find Your Next Meal")
            .searchable(text: $viewModel.searchText)
        }
    }
}

How to Display Search Results

To implement the search functionality, you’ll need to filter data with the user’s search query.

Add a computed property to compute the filtered array for meals. If the search text is empty, I don´t want to filter and instead return the full array of meals:

class MealListViewModel: ObservableObject {

    @Published var meals = [Meal]()
    @Published var searchText: String = ""
    
    var filteredMeals: [Meal] {
        guard !searchText.isEmpty else { return meals }
        return meals.filter { meal in
            meal.name.lowercased().contains(searchText.lowercased())
        }
    }
     ...
}

Now instead of the full list of meals, I am only showing the filtered data in the ForEach. The following example shows how the list displayed changes automatically when I enter a search text:.

import SwiftUI

struct ContentView: View {

    @StateObject var viewModel = MealListViewModel()

    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.filteredMeals) { meal in
                   MealCardView(meal: meal)
                }
                .listRowSeparator(.hidden, edges: .all)
            }
            .listStyle(.plain)
            .navigationTitle("Find Your Next Meal")
            .searchable(text: $viewModel.searchText)
        }
    }
}

Advanced Search Features in SwiftUI

Search Suggestions

SwiftUI offers an easy way to add search suggestions to your app by using the Searchable modifiers, which provide an optional parameter called “suggestions.” You can provide a view for this parameter, which might be a few static buttons or a dynamic set of suggestions generated from your app’s database or server.

For this demo, I am using a constant property with default suggested search texts. I am not showing all suggestions, only the relevant ones that fit with the search text. Therefore I added another computed property which is ´filteredSuggestions´. The following code is a simple implementation to test search suggestions:

class MealListViewModel: ObservableObject {
    @Published var suggestions = ["Muffin", "Noodles", "Beef", "Wraps", "Hamburger", "Chicken",
                                  "Falafel", "Pita", "Avocado", "Tomato",
                                  "Chocolate", "Strawberry", "Coffee"]
    var filteredSuggestions: [String] {
        guard !searchText.isEmpty else { return [] }
        return suggestions.sorted().filter { $0.lowercased().contains(searchText.lowercased()) }
    }
    ...
}

I can then use these suggestions for the meal list view. When the user enters the search, I am not showing any suggestions. As soon as the search text is not empty, I use it to filter the relevant suggestions and show them below the search text field. When the user taps on a suggestion, the search text is updated to the selected suggestion:

.searchable(text: $viewModel.searchText, suggestions: {
    ForEach(viewModel.filteredSuggestions, id: \.self) { suggestion in
        Button {
            viewModel.searchText = suggestion
        } label: {
           Label(suggestion, systemImage: "bookmark")
        }
     }
})

Apple added a shorter form for this and replaces the button interaction with a ´searchCompletion´ modifier. The following code is equivalent to the previous implementation:

.searchable(text: $viewModel.searchText, suggestions: {
    ForEach(viewModel.filteredSuggestions, id: \.self) { suggestion in
       Text(suggestion)
         .searchCompletion(suggestion)
     }
})

Note that searchable(text:placement:prompt:suggestions:) has been soft deprecated with iOS 16.2 and macOS 13.1. You can use the newer searchSuggestions modifier instead

Feeling Lost in SwiftUI?

This SwiftUI roadmap shows you what to learn next.

• Key concepts at a glance
• Spot your knowledge gaps
• Guide your learning path

Get the FREE PDF

Ideal for beginners and self-learners.

Hidding Search Suggestions Depending on the Platform

If you want to hide search suggestions for some situations, you can use the searchSuggestions(_ visibility: Visibility, for placements:) modifier, which came with iOS 16 and macOS 13. For the placement, you have to specify SearchSuggestionsPlacement which has the cases of automatic, menu, and content. On macOS, search suggestions are displayed as a menu below the search text field, and on iOS, they are shown instead of the content. 

This means that the following will hide suggestions on iOS:

.searchable(text: $viewModel.searchText, suggestions: {
    ForEach(viewModel.filteredSuggestions, id: \.self) { suggestion in
       Text(suggestion)
         .searchCompletion(suggestion)
     }
   .searchSuggestions(.hidden, for: .content)
})

and if you want to hide suggestions on the Mac, you can set this:

.searchSuggestions(.hidden, for: .menu)

If you for example want to show suggestions on iOS inside your main list. You can hide the suggestions on iOS only and use the environment for searchSuggestionsPlacement to check if you should show suggestions. I need to create another subview to properly get the environment value:

struct CustomSearchSuggestionView: View {

    @ObservedObject var viewModel: MealListViewModel
    @Environment(\.searchSuggestionsPlacement) var placement

    var body: some View {
        if placement == .content {
            ForEach(viewModel.filteredSuggestions, id: \.self) { suggestion in
                Button {
                    viewModel.searchText = suggestion
                } label: {
                    Label(suggestion, systemImage: "bookmark")
                }
            }
        }
    }
}

struct HideSuggestionMealListView: View {

    @StateObject var viewModel = MealListViewModel()
    @State var selectedMeal: Meal? = nil

    var body: some View {
        NavigationSplitView(sidebar: {
            List(selection: $selectedMeal) {
                CustomSearchSuggestionView(viewModel: viewModel)

                ForEach(viewModel.filteredMeals) { meal in
                    MealCardView(meal: meal)
                        .tag(meal)
                }
                .listRowSeparator(.hidden, edges: .all)
            }
            .listStyle(.plain)
            .navigationTitle("Find Your Next Meal")
            .searchable(text: $viewModel.searchText, suggestions: {
                ForEach(viewModel.filteredSuggestions, id: \.self) { suggestion in
                    Text(suggestion)
                        .searchCompletion(suggestion)
                }
               .searchSuggestions(.hidden, for: .content)
            })
        }, detail: {
            if let meal = selectedMeal {
                DetailView(meal: meal)
            } else {
                Text("Select a Meal")
            }
        })
    }
}

I modified the placement of search suggestions only. For macOS, they are still displayed in the default position, which is in a menu below the search text field.

Search Tokens

A newer feature for iOS 16 and macOS 13 are search tokens. Let’s say I want to allow the user of my app to search for food that is on the go or on sale. My data has a tag property that I can use to filter, but how do I allow my users to pick these options? You might want to use a picker, but tokens are a much smoother user experience. Learn how to use search tokens in this blog post Search Tokens in SwiftUI

Creating a Scope Bar to Filter Results

You can add a scope bar to your search bar for filtering by Category. This scope control limits searches by simply searching for specific scope areas. Using scope bars can be accomplished easily by simply implementing a new searchScope modifier.

As an example, I could use the origin of the meal to limit the search scope. If you want to see the full breakdown of how I implemented search scope, check out this post about How to use Search Scopes in SwiftUI to improve search on iOS and macOS.

Other Filter Options

If you want to support filtering options, you can show a SwiftUI Picker. You can see different implementations in this post: “Master SwiftUI Picker View”. For example, you could add a picker or menu view in the toolbar. The picker options would be similar to the tokens.

Detecting and Dismissing a Search Field Programmatically

In some cases, you may want to programmatically detect when a user is interacting with the search field, or dismiss the search field when certain conditions are met. In SwiftUI, you can use the Environment value for 
isSearching and dismissSearch. You have to access this value from a view that is inside the search list. 

For example, if you want to show a different list for the search results. I am extracting my List in a reusable view like so:

struct MealListContentView: View {

    @Binding var selectedMeal: Meal?
    let meals: [Meal]

    var body: some View {
        List(selection: $selectedMeal) {
            ForEach(meals) { meal in
                MealCardView(meal: meal)
                    .tag(meal)
            }
            .listRowSeparator(.hidden, edges: .all)
            .listRowInsets(.init(top: 10, leading: 10,
                                 bottom: 10, trailing: 10))
        }
        .listStyle(.plain)
        .navigationTitle("Find Your Next Meal")

    }
}

I create a separate view to decide what view to show. If the user is in search mode, I will show an overlay with the search results. The check is done with the isSearching property and if the user entered a valid search term:

private struct MealSearchListView: View {

    @ObservedObject var viewModel: MealListViewModel
    @Environment(\.isSearching) var isSearching
    @Binding var selectedMeal: Meal?

    var body: some View {
        MealListContentView(selectedMeal: $selectedMeal,
                            meals: viewModel.meals)
            .overlay {
                if isSearching && !viewModel.searchText.isEmpty {
                    VStack {
                        Text("Search Results")
                        MealListContentView(selectedMeal: $selectedMeal,
                                            meals: viewModel.filteredMeals)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color("background"))
                }
            }
    }
}

struct IsSearchingMealListView: View {
    @StateObject var viewModel = MealListViewModel()
    @State var selectedMeal: Meal? = nil
    var body: some View {
        NavigationStack {
            MealSearchListView(viewModel: viewModel,
                                 selectedMeal: $selectedMeal)
                .searchable(text: $viewModel.searchText)
        }
    }
}
private struct MealSearchListView: View {
    @ObservedObject var viewModel: MealListViewModel
    @Environment(\.isSearching) var isSearching
    @Binding var selectedMeal: Meal?
    var body: some View {
        MealListContentView(selectedMeal: $selectedMeal,
                            meals: viewModel.meals)
            .overlay {
                if isSearching && !viewModel.searchText.isEmpty {
                    VStack {
                        Text("Search Results")
                        MealListContentView(selectedMeal: $selectedMeal,
                                            meals: viewModel.filteredMeals)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color("background"))
                }
            }
    }
}

In addition, you can programmatically dismiss the search. I can add a done button in the search results and use the dismissSeach Environment property:

private struct MealSearchListView: View {

    @Environment(\.isSearching) var isSearching
    @Environment(\.dismissSearch) var dismissSearch

    @ObservedObject var viewModel: MealListViewModel
    @Binding var selectedMeal: Meal?

    var body: some View {
        MealListContentView(selectedMeal: $selectedMeal,
                            meals: viewModel.meals)
            .overlay {
                if isSearching && !viewModel.searchText.isEmpty {
                    VStack {
                        HStack {
                            Text("Search Results")

                            Button("Done") {
                                dismissSearch()
                            }
                        }
                        MealListContentView(selectedMeal: $selectedMeal,
                                            meals: viewModel.filteredMeals)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color("background"))
                }
            }
    }
}

Feeling Lost in SwiftUI?

This SwiftUI roadmap shows you what to learn next.

• Key concepts at a glance
• Spot your knowledge gaps
• Guide your learning path

Get the FREE PDF

Ideal for beginners and self-learners.

Performing a task when the user finishes the search

If your data comes from a server, you need to do a lot of fetching if you react to every user input. The way Apple recommends this is by using the onSubmit modifier. You can specify text or search for onSubmit. If I only wanted to execute my fetching when the user presses enter in the search text field, the following implementation would work:

NavigationStack {
    List {
        ...
    }
    .searchable(text: $viewModel.searchText)

    .onSubmit(of: .search) {
        print("fetch data from server to refresh with full search query")
        // viewModel.performQuery()
    }
}

Changing the Appearance of the Search

Per default, the text field shows the phrase “search”. This is also automatically localized in different languages. If you want to change the placeholder, you can use the prompt argument of the searchable modifier:

.searchable(text: $viewModel.searchText, prompt: "Search for Meals")

How to always show the search bar

For iOS, the search text field is not shown directly in certain situations. Only after the user pulls down the list, will it appear. 

If the search is inside the first view of a NavigationStack or the sidebar of a NavigationSplitView, the search text field is shown directly. If the seach is in the second or later view, the search is hidden initially.

You can override this behavior by using the search placement like so:

.searchable(text: $viewModel.searchText, 
            placement: .navigationBarDrawer(displayMode:.always))

Search Placement

If you have an app with multiple screens or a NavigationSplitView, things get a bit more interesting because you can add the search in different parts of your app. As an example, I am showing a 3-column NavigationSplitView, where the sidebar has a list of all the meal categories.

NavigationSplitView(columnVisibility: $columnVisibility) {
    SidebarView(selectedCategory: $viewModel.selectedCategory)
} content: {
    ContentView(meals: viewModel.filteredMeals,
                selectedMeal: $viewModel.selectedMeal)
} detail: {
    if let meal = viewModel.selectedMeal {
        DetailView(meal: meal)
    } else {
        Text("Detail")
    }
}
.searchable(text: $viewModel.searchText)

If I add a searchable modifier to the NavigationSplitView, the default placement on macOS will be used and the search text field appears in the toolbar on the trailing corner.

In order to change the search bar placement you can either specify a different placement like in the following:

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

The same app on the iPhone would then add the search bar to the sidebar view.

You can change the placement of the search bar by moving the searchable view modifier to the content area:

NavigationSplitView(columnVisibility: $columnVisibility) {
    ...
} content: {
    ContentView(meals: viewModel.filteredMeals,
                selectedMeal: $viewModel.selectedMeal)
    .searchable(text: $viewModel.searchText,
                placement: .navigationBarDrawer(displayMode: .always))
} detail: {
    ...
}

I am using the display mode to always because the search UI would otherwise only be visible after the user pulls the list.

Similarly, we can change the placement on the iPad for a 3-column layout.

If you want to display the search bar in the sidebar area, you have to move the searchable view modifier inside the NavigationSplitView and attach it to the sidebar view:

NavigationSplitView(columnVisibility: $columnVisibility) {
   SidebarView()
        .searchable(text: $viewModel.searchText)
} content: {
    ...
} detail: {
    ...
}

Summary

Through the “SwiftUI Search Bar: Best Practices and Examples” blog post, you have learned how to add and customize a search bar in SwiftUI, including its placement, search result display, search suggestions, and programmatically dismissing the search. Additionally, you saw how to perform tasks upon completion of the search. By following the best practices outlined in the post and implementing the examples provided, you can create a more efficient and user-friendly search experience in my SwiftUI app.

Download the project files

Further Reading:

• Use Search with Core Data: SwiftUI and Core Data Course
• Search Tokens for advanced search queries
• Search Scope for advanced search queries – a must for macOS apps
• Master SwiftUI Picker
• Human interface guidelines for search

The post SwiftUI Search Bar: Best Practices and Examples appeared first on swiftyplace.

This blog is an addition to my previous post about SwiftUI Search Bar: Best Practices and Examples. Please have a look there if you need an overview of the SwiftUI search.

Download the project files

Search Tokens

Let’s say I have a food delivery app and I want to allow the user of my app to search for food that is on the go or on sale. My data has a tag property that I can use to filter.

struct Meal: Codable, Hashable, Identifiable {
    let imageURL: String
    let id: String
    let category: MealCategory
    let name: String
    let location: String
    let rating: Double
    var tags: [String]
}

But how do I allow my users to pick these options? You might want to use a picker, but tokens are a much smoother user experience.

There are 2 different kinds of implementation for tokens:

searchable(text: Binding<String>, tokens: Binding<C>, suggestedTokens: Binding<C>, @ViewBuilder token: @escaping (C.Element)

searchable(text: Binding<String>, tokens: Binding<C>, @ViewBuilder token: @escaping (C.Element) -> T)

In the first, you give a fixed array of suggested tokens. SwiftUI displays these suggestions like in the example above. When the user selects a suggestion, it is removed from the suggestions array and added to the selected token property.

The second implementation will not show suggestions. A use case would be to dynamically add tokens depending on the user input. For example, if you have a list of common search tokens. As soon as the user enters one of these, you add the token. Or when the user types a comma, you can use the search text as a new token.

Let’s look at an example for the first case. We need to create a new type for tokens because SwiftUI expects an Identifiable type:

enum MealSearchToken: String, Hashable, CaseIterable, Identifiable {
    case fourStarReview = "4+ star review"
    case onSale = "On sale"
    case toGo = "To go"
    case coupon = "coupon"
    var id: String { rawValue }
    func icon() -> String {
        switch self {
            case .fourStarReview:
               return "star"
            case .onSale:
               return "paperplane"
            case .toGo:
               return "figure.walk"
            case .coupon:
               return "tag"
        }
    }
}	

I am using here the tokens that correspond to the values of the Meal types tags property. Now, you need to create state property for the selected and suggested tokens. The filtered meal array needs to now also include the selected tokens:

class MealListViewModel: ObservableObject {
    @Published var meals = [Meal]()
    @Published var searchText: String = ""
    @Published var selectedTokens = [MealSearchToken]()
    @Published var suggestedTokens = MealSearchToken.allCases
    var filteredMeals: [Meal] {
        var meals = self.meals
        if searchText.count > 0 {
            meals = meals.filter { $0.name.localizedCaseInsensitiveContains(searchText) }
        }
        for token in selectedTokens {
            switch token {
                case .fourStarReview:
                    meals = meals.filter({ $0.rating >= 4 })
                case .onSale, .coupon, .toGo:
                    meals = meals.filter({ $0.containsTag(token.rawValue)})
            }
        }
        return meals
    }
    ...
}

I can now update my searchable modifier to include these tokens:

.searchable(text: $viewModel.searchText,
            tokens: $viewModel.selectedTokens,
            suggestedTokens: $viewModel.suggestedTokens,
            token: { token in
                Text(token.rawValue)
            })

In the closure, I will get the token and decide what view to show. For example, if you like to add a colorful background and an icon, you can have a look at this example:

import SwiftUI
struct ContentView: View {
    @StateObject var viewModel = MealTokenListViewModel()
    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.filteredMeals) { meal in
                   MealCardView(meal: meal)
                }
                .listRowSeparator(.hidden, edges: .all)
            }
            .listStyle(.plain)
            .navigationTitle("Find Your Next Meal")
            .searchable(text: $viewModel.searchText,
                        tokens: $viewModel.selectedTokens,
                        suggestedTokens: $viewModel.suggestedTokens,
                        token: { token in
                Label(token.rawValue, systemImage: token.icon())
                    .encapsulate(color: Color.cyan,
                                 foregroundColor: .white)
            })
        }
    }
}	

Showing different views for suggested and selected tokens

The provided view is used in both the suggestion list and as a token in the text field. There is a way to add 2 different views. For my example, I want a shorter token in the text field otherwise it does not fit more than 2 tokens. First, I don´t use the suggestedTokens parameter and use a shorter view for the token. This will be used inside the search text field:

.searchable(text: $viewModel.searchText,
            tokens: $viewModel.selectedTokens, token: { token in
            Label(" ", systemImage: token.icon())
})

Then I use the searchSuggestions modifier to add the tokens in the suggestions area:

struct ContentView: View {
    @StateObject var viewModel = MealTokenListViewModel()
    @State var selectedMeal: Meal? = nil
    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.filteredMeals) { meal in
                   MealCardView(meal: meal)
                }
                .listRowSeparator(.hidden, edges: .all)
            }
            .listStyle(.plain)
            .navigationTitle("Find Your Next Meal")
            .searchable(text: $viewModel.searchText,
                        tokens: $viewModel.selectedTokens, token: { token in
                Label(" ", systemImage:  token.icon())
            })
            .searchSuggestions({
                ForEach(viewModel.suggestedTokens) { token in
                    Button {
                        viewModel.selectedTokens.append(token)
                    } label: {
                        Label(token.rawValue, systemImage:  token.icon())
                    }
                }
            })
        }
    }
}

It does not work well with icons only. But you could for example also show a shorter text, that describes the search token well.

Dynamically Add Search Tokens

I want to show you now a more advanced implementation. You can analyze the search text during typing and add new tokens dynamically. For example, if you have a list of common search tokens. As soon as the user enters one of these and presses enter or comma, you add the token.

I will handle the token updates in the view model. The following code does not show token suggestions:

NavigationStack {
    List {
        ...
    }
    .searchable(text: $viewModel.searchText,
                tokens: $viewModel.selectedTokens, token: { token in
        Text(token.name)
    })
}

As I said previously, the token data needs to be Identifiable. I am declaring a simple type, that holds the String values and add a test data array that I will use as common tokens:

struct StringToken: Identifiable {
    let name: String
    let id = UUID()
    static func testData() -> [StringToken] {
        ["Muffin", "Noodles", "Beef", "Wraps", "Hamburger", "Chicken",
         "Falafel", "Pita", "Avocado", "Tomato",
         "Chocolate", "Strawberry", "Coffee", "Cheese"].map {
            StringToken(name: $0)
        }
    }
}

Now to the hard part of updating the view model. First I add properties for StringToken and the common tokens which in a real app would come from the server.

class MealListViewModel: ObservableObject {
    @Published var meals = [Meal]()
    @Published var searchText: String = ""
    @Published var selectedTokens = [StringToken]()
    @Published private var commonTokens: [StringToken] = StringToken.testData()
    var filteredMeals: [Meal] {
        var meals = self.meals
        if searchText.count > 0 {
            meals = meals.filter { $0.name.localizedCaseInsensitiveContains(searchText) }
        }
        if selectedTokens.count > 0 {
            let tokens = selectedTokens.map { $0.name }
            meals = meals.filter { $0.name.containsAll(tokens) }
        }
        return meals
    }
    ...
}    

In order to create new tokens dynamically, I need to check when the search text changes. Time to use the Combine framework.

import SwiftUI
import Combine
class MealListViewModel: ObservableObject {
   ...
   var subscriptions = Set<AnyCancellable>()
   init() {
        meals = service.loadMealsFromDataStorage()
        $searchText.filter({
            $0.last == " "
        })
        .filter({
            $0.count > 1
        })
        .sink { [unowned self] text in
            var filteredText = text
            for suggestion in commonTokens {
                if let range = filteredText.lowercased().range(of: suggestion.name.lowercased()) {
                    filteredText.removeSubrange(range)
                    filteredText.removeLast() // remove " "
                    DispatchQueue.main.async {
                        self.searchText = filteredText
                    }
                    self.selectedTokens.append(suggestion)
                }
            }
        }
        .store(in: &subscriptions)
    }
}

First, I check if the user’s last input was an ” ” with a filter. Then I analyze the search text in the sink. I loop over all common tokens and check if any of these is contained in the user input. If it is, I remove the token from the search text. I create a new token and add it to the selected tokens.

In order to update the search text state property, I need to use DispatchQueue.main.async, otherwise the SwiftUI view will not update correctly. This seems to be an odd bug.

A similar data stream can be implemented if you want to create new tokens when the user types a comma “,”. In this case, I simply take the whole search term and create a new token from it.

class MealListViewModel: ObservableObject {
       ...
       init() {
       ...
       $searchText.filter({
            $0.last == ","
        })
        .filter({
            $0.count > 1
        })
        .sink { text in
            var filteredText = text
            filteredText.removeLast() // remove "," at the end
            self.selectedTokens.append(StringToken(name: filteredText))
            DispatchQueue.main.async {
                self.searchText = ""
            }
        }
        .store(in: &subscriptions)
    }
}		

Other Filter Options

If you want to support lower iOS and macOS versions, you can show filtering options with SwiftUI Picker. You can see different implementations in this post: “Master SwiftUI Picker View”. For example, you could add a picker or menu view in the toolbar. The picker options would be similar to the tokens.

Summary

By using SwiftUI Search Tokens, you can create a more advanced and customizable search experience in your app. You can add tokens to the search bar by specifying a list of token strings, and show them in the suggested area to help guide users in their search. Additionally, you can dynamically add new tokens by analyzing the search text as the user types, allowing for more personalized and accurate search results. With these features, SwiftUI Search Tokens provide a powerful tool for enhancing the search functionality of your app.

Further Reading:

• Use Search with Core Data: SwiftUI and Core Data Course
• How to work with the Search bar in SwiftUI
• Search Scope for advanced search queries – a must for macOS apps
• Human interface guidelines for search

The post Search Tokens in SwiftUI: How to implement advanced search in iOS and macOS appeared first on swiftyplace.

Search Scope is available for iOS 16+ and macOS 13+.

This blog is an addition to my previous post about SwiftUI Search Bar: Best Practices and Examples. Please have a look there if you need an overview of the SwiftUI search.

Download the project files

Defining a Search Scope

As an example, I will continue using a Meal app that shows a list of meals. The Meal data is defined as follows:

struct Meal: Codable, Hashable, Identifiable {
    let imageURL: String
    let id: String
    let category: MealCategory
    let name: String
    let location: String
    let rating: Double
    var tags: [String]
}

The category is defined as follows:

enum MealCategory: String, Codable, CaseIterable, Identifiable, Hashable {
    case african = "African"
    case american = "American"
    case asian = "Asian"
    case europian = "Europian"
    case oceanian = "Oceanian"
    var id: String { rawValue }
}

When searching for a meal, my users can currently enter a search text in the search bar. I then use that to filter the meals that have this search term in the name:

struct MealListView: View {
    @StateObject var viewModel = MealListViewModel()
    @State var selectedMeal: Meal? = nil
    var body: some View {
        NavigationSplitView(sidebar: {
            List(selection: $selectedMeal) {
                ForEach(viewModel.filteredMeals) { meal in
                   MealCardView(meal: meal)
                        .tag(meal)
                }
                .listRowSeparator(.hidden, edges: .all)
            }
            .listStyle(.plain)
            .navigationTitle("Find Your Next Meal")
        }, detail: {
            if let meal = selectedMeal {
                DetailView(meal: meal)
            } else {
                Text("Select a Meal")
            }
        })
}

How to add a Search Scope

In order to add a search scope, you can simply use the searchScopes modifier where you have to provide a binding to an Identifiable type used for selecting the scope. 

I am storing my state property for the selected scope in the view model, where I also will evaluate the filtered meals array:

class MealListViewModel: ObservableObject {
    @Published var meals = [Meal]()
    @Published var searchText: String = ""
    @Published var mealSearchScope: MealSearchScope = .all
    ...
}

In this case, I show all options for my scope category in a ForEach. The implementation is similar to a SwiftUI picker view. 

struct SearchScopeMealListView: View {
    @StateObject var viewModel = MealTokenListViewModel()
    @State var selectedMeal: Meal? = nil
    var body: some View {
        NavigationSplitView(sidebar: {
            List(selection: $selectedMeal) {
                ForEach(viewModel.meals) { meal in
                   MealCardView(meal: meal)
                        .tag(meal)
                }
                .listRowSeparator(.hidden, edges: .all)
            }
            .listStyle(.plain)
            .navigationTitle("Find Your Next Meal")
        }, detail: {
            if let meal = selectedMeal {
                DetailView(meal: meal)
            } else {
                Text("Select a Meal")
            }
        })
        .searchable(text: $viewModel.searchText)
        .searchScopes($viewModel.mealSearchScope, scopes: {
            Text("All").tag(MealSearchScope.all)
            ForEach(MealCategory.allCases) { category in
                Text(category.rawValue)
                     .tag(MealSearchScope.category(category))
            }
        })
    }
}

On iOS, the search scope area is shown as a picker with a segmented picker style. When the user first enters the search text field, no search scope is displayed. Only once you start typing, will the scope be shown. 

 The initially selected scope is set to all because I set the initial value for the state property to all

class MealListViewModel: ObservableObject {
     ...
    @Published var mealSearchScope: MealSearchScope = .all
}

On macOS, the search scope is shown in the toolbar above the detail area. Once the user enters the search text field, the search scope area is shown.

Showing Filtered Results

I am currently computing the filtered meal array in the view model with the search term. I can add now the information from the search scope:

class MealListViewModel: ObservableObject {
    @Published var meals = [Meal]()
    @Published var searchText: String = ""
    @Published var mealSearchScope: MealSearchScope = .all
    var filteredMeals: [Meal] {
        var meals = self.meals
        switch mealSearchScope {
            case .all: break
            case .category(let category):
                meals = meals.filter { $0.category == category }
        }
        if searchText.count > 0 {
            meals = meals.filter { $0.name.localizedCaseInsensitiveContains(searchText) }
        }
        return meals
    }
    ...
}

Other Filter Options

If you want to support lower iOS and macOS versions, you can show filtering options with SwiftUI Picker. You can see different implementations in this post: “Master SwiftUI Picker View”. For example, you could add a picker or menu view in the toolbar. The picker options would be similar to the tokens.

Summary

Incorporating Search Scopes in your SwiftUI app can significantly improve the search functionality on iOS and macOS. Search Scopes allow users to filter and refine search results by selecting specific categories or filters. This provides users with a more targeted and personalized search experience, enabling them to quickly find the content they need. Additionally, Search Scopes can be especially useful for macOS apps, where users often work with large amounts of data and need to quickly and easily filter results. With Search Scopes, your SwiftUI app can offer a more efficient and intuitive search experience to your users.

Further Reading:

• Use Search with Core Data: SwiftUI and Core Data Course
• How to work with the Search bar in SwiftUI
• Search Tokens for advanced search queries – a must for macOS apps
• Human interface guidelines for search

The post How to use Search Scope in SwiftUI to improve search on iOS and macOS appeared first on swiftyplace.