Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC21 · 12 min · SwiftUI & UI Frameworks

Craft search experiences in SwiftUI

Discover how you can help people quickly find specific content within your apps. Learn how to use SwiftUI’s .searchable modifier in conjunction with other views to best incorporate search for your app. And we’ll show you how to elevate your implementation by providing search suggestions to help people understand the types of searches they can perform.

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 8 snippets

Colors Suggestions swift · at 0:10 ↗ 
struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text) {
           ForEach(suggestions) { suggestion in
                Button {
                    text = suggestion.text
                } label: {
                    ColorsSuggestionLabel(suggestion)
                }
            }
        }
    }
}
New Searchable Modifier swift · at 1:17 ↗ 
ContentView()
    .searchable(text: $text)
Weather Search swift · at 1:58 ↗ 
NavigationView {
    WeatherList(text: $text) {
        ForEach(data) { item in
            WeatherCell(item)
        }
    }
}
.searchable(text: $text)
Weather List swift · at 3:11 ↗ 
struct WeatherList: View {
    @Binding var text: String
    
    @Environment(\.isSearching)
    private var isSearching: Bool
    
    var body: some View {
        WeatherCitiesList()
            .overlay {
                if isSearching && !text.isEmpty {
                    WeatherSearchResults()
                }
            }
    }
}
Colors Search swift · at 5:07 ↗ 
struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text)
    }
}
Colors Search with TV swift · at 7:15 ↗ 
struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            #if os(tvOS)
            TabView {
                Sidebar()
                ColorsSearch()
                    .searchable(text: $text)
            }
            #else
            Sidebar()
            DetailView()
            #endif
        }
        #if !os(tvOS)
        .searchable(text: $text)
        #endif
    }
}
Colors Search Completions swift · at 9:09 ↗ 
struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text) {
           ForEach(suggestions) { suggestion in
                ColorsSuggestionLabel(suggestion)
                    .searchCompletion(suggestion.text)
            }
        }
    }
}
On Submit swift · at 10:21 ↗ 
ContentView()
    .searchable(text: $text) {
        MySearchSuggestions()
    }
    .onSubmit(of: .search) {
        fetchResults()
    }