Untitled

struct SearchView: View {

    @State var searchTerm: String = ""

    var sortedMatchingAssets: [String] {
       [
        "aaa1", "bbb1", "ccc1", "aaa2", "bbb2", "ccc2", "aaa3", "bbb3", "ccc3", "aaa4", "bbb4", "ccc4",
        "aaa5", "bbb5", "ccc5", "aaa6", "bbb6", "ccc6", "aaa7", "bbb7", "ccc7", "aaa8", "bbb8", "ccc8",
        "aaa9", "bbb9", "ccc9", "aahtra", "bgrebb", "ccgreac", "aagweaa", "bbbfw", "cafwecc", "aafewa", "bbfweavb", "caw23cc",
        "aaa10", "bbb10", "ccc10", "aaa14", "bbb14", "ccc14", "aaa15", "bbb", "ccc15", "aaa16", "bbb16", "ccc16",
        "aaa11", "bbb11", "ccc11", "aaa17", "bbb17", "ccc17", "aaa18", "bbb18", "ccc18", "aaa19", "bbb19", "ccc19",
        "aaa12", "bbb12", "ccc12", "aaa20", "bbb20", "ccc20", "aa21a", "bb21b", "ccc21", "21a21aa", "b22bb", "22ccc",
        "aaa13", "bbb13", "ccc13", "aa31a", "4bbb", "c22cc", "aad2a", "bb11b", "ccg3c", "a12aa", "bf32bb", "c32cc"
       ]
    }

    var suggestedSearchTerms: [String] {
        guard !searchTerm.isEmpty else { return [] }
        return sortedMatchingAssets.filter { $0.contains(searchTerm) }
    }

    var body: some View {
        ScrollView(.horizontal) {
           HStack {
                ForEach(sortedMatchingAssets, id: \.self) { asset in
                    Button {

                    } label: {
                        Text(asset)
                    }
                }
            }
           .background(.red)
        }
        .scrollClipDisabled()
        .searchable(text: $searchTerm)
        .searchSuggestions {
            ForEach(suggestedSearchTerms, id: \.self) { suggestion in
                Text(suggestion)
            }
        }
        .background(.blue)
    }
}