One of the essential elements of a great app is its ability to provide a seamless user experience. That’s why including a search bar is often crucial in making an app more user-friendly. SwiftUI search bar is a great tool to help users search for content within an app quickly. However, implementing it effectively requires understanding the best practices for designing and positioning the search bar and optimizing the search algorithms to provide accurate and relevant results.
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
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
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"))
}
}
}
}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.
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
I have been surfing online more than three hours today, yet I never found
any interesting article like yours. It is pretty worth enough for me.
In my opinion, if all website owners and bloggers made good content as you
did, the internet will be much more useful than ever before.
This was a huge help! However, I was trying to do something that was not intuitive at first, but now makes sense. I wanted a searchable view that was part of the stack but did not specifically have “navigationStack” as part of its own view. For all the examples that you provide, you have .searchable in the same view as the navigationStack. Well, it turns out, as long as the view is part of the navigationPath, you simply add .searchable and it Works! For anyone interested: https://github.com/jrderanian/WorkoutTimeFreshStart
Thank you for all your help Karen!