searchable: Add an auxilliary search view

Question

Created Sep ’24

Replies 3

Boosts 0

Participants 3

Is there a clean way to add an auxilliary view to the SwiftUI .searchable view? The best I have found is to add a VStack above the list being searched, but this makes the removal transition behave funny.

("Funny" means the search view and aux views animate away fine, but after they finish animating the List view snaps to the top of the screen, hiding the idle search field. The normal behavior leaves the idle search field showing.)

NavigationStack {
    MyListView().searchable(...)
}
———
struct MyListView: View {
    @Environment(\.isSearching) private var isSearching
    var body: some View {
        if isSearching {
            VStack {...my auxilliary view...}
        }
        List {...}
    }
}

Boost

Answer 1

Claude31 OP

Sep ’24

Not sure I understand.

Once search is completed, does isSearching turn to false ?

Then it is normal that the search View disappears.

Do you want to keep the SearchView always visible ?

If so, I see at least 2 options:

remove the if isSearching test
add a view when isSearching is false

        if isSearching {
            VStack {...my auxilliary view...}
        } else {
             // Call a View of the same height than your auxilliary View
        }

0

Answer 2

DTS Engineer OP

Apple

Sep ’24

To add to @Claude31 point, could you elaborate what you mean by an auxiliary view and what you're trying to achieve ?

If you're trying to configure the search suggestions and present a view when someone activates the search interface, you could use the searchSuggestions(_:) modifier. It allows you suggest search terms during a search operation by providing a collection of view to the modifier.

For example:

enum FruitSuggestion: String, Identifiable {
    case apple, banana, orange
    var id: Self { self }
}


@State private var text = ""
@State private var suggestions: [FruitSuggestion] = []


var body: some View {
    MainContent()
        .searchable(text: $text) {
            ForEach(suggestions) { suggestion
                Text(suggestion.rawValue)
                    .searchCompletion(suggestion.rawValue)
            }
            .searchSuggestions(.hidden, for: .content)
        }
}

0

Answer 3

LogicalLight OP

Sep ’24

The purpose of the aux view is to give access to a set of semi-advanced search controls. The controls I want to present are more in the line of filter presets, like, say, an Amazon search's filter sidebar, but using Picker popups or toggles.

In the screen GIF below, you'll see me tapping the "primary" search field and how it animates into search mode: The field moves up and shrinks to make space for the Cancel button. When canceling or submitting the search, search mode ends and it animates in reverse.

My hacky aux view here is just a VStack with a couple of TextFields, for testing purposes. When I add it to MyListView it animates in nicely when isSearching becomes true, but animates out badly when it becomes false. To wit, the removal transition works correctly until it's done, and then the scroll view snaps up, hiding the primary search field. Without putting in the conditional aux view the primary search field stays visible. For an example of that, try the Notes app's search field.

@Claude31, I want the aux view to only be visible only while the .searchable primary search field is active. When it's not active the aux view hides away.

@DTS Engineer, the goal is a few critical preset filters. I believe using search suggestions (or tokens) would be worse as they would fill up/clog up the search text field and make it hard for a user to refine the search with their own typed text.

Thanks for your replies and ideas.

If I can't avoid the animation problem, I'll abandon this design goal and go with an "Advanced Search" sheet instead. Not as good as a compact live search, but OK.

Simulator Screen Recording - small.gif

0