Async search bar

Question

I need to filter my model data with a search bar. I added the .searchable() property and when the search text changes I filter my objects with fuzzy matching. This takes too much time and the app lags when writing into the search box. So I want to do the searching asynchronously so that the app doesn't freeze.

I tried to do it with the onChange(of:) property and then I create a Task that runs the async function because the onChange() property doesn't allow async functions by themselves. But the app still lags.

Here is a code example of how I tried doing it:

import SwiftUI
import Fuse

struct SearchView: View {
    @EnvironmentObject var modelData: ModelData
    
    @State var searchText = ""
    @State var searchResults: [Item] = []
    @State var searchTask: Task<(), Never>? = nil
    
    let fuseSearch = Fuse()
    
    var body: some View {
        // Show search results
    }
    .searchable(text: $searchText)
    .onChange(of: searchText) { newQuery in
        // Cancel if still searching
        searchTask?.cancel()
            
        searchTask = Task {
            searchResults = await fuzzyMatch(items: modelData.items, searchText: newQuery)
        }
    }
    

    func fuzzyMatch(items: [Item], searchText: String) async -> [Item] {
        filteredItems = items.filter {
            (fuseSearch.search(searchText, in: $0.name)?.score ?? 1) < 0.25
        }
        
        return filteredItems
    }
}

I would really appreciate some help.

Look into debouncing with combine. – lorem ipsum Nov 16 '22 at 20:05 — lorem ipsum, Nov 16 '22 at 20:05

score 3 · Accepted Answer · answered Nov 16 '22 at 21:24

I think the main problem is debouncing as lorem ipsum mentioned before. I just tested my code and you need to call your filter method where i printed.

In this way you will not filter for every editing textfield. You will filter after some millisecond which you may change.

You can find more detail in this link SwiftUI Combine Debounce TextField

    struct Example: View {

    @State var searchText = ""
    let searchTextPublisher = PassthroughSubject<String, Never>()
       
    var body: some View {
        NavigationView {
            Text("Test")
        }
        .searchable(text: $searchText)
        .onChange(of: searchText) { searchText in
            searchTextPublisher.send(searchText)
        }
        .onReceive(
            searchTextPublisher
                .debounce(for: .milliseconds(500), scheduler: DispatchQueue.main)
        ) { debouncedSearchText in
            print("call your filter method")
        }
    }
}

Rob · Answer 2 · 2022-12-18T17:46:20.143

If you want to introduce debouncing, you can just add a Task.sleep:

.onChange(of: searchText) { newQuery in
    // Cancel if still searching
    searchTask?.cancel()
        
    searchTask = Task {
        try await Task.sleep(for .seconds(0.5))
        searchResults = await fuzzyMatch(items: modelData.items, searchText: newQuery)
    }
}

If you do that, you will have to change searchTask to be Task<(), Error>?.

However, debouncing might not be the whole issue. If your fuzzy filtering is too slow, you might need to make it run asynchronously and get it off the main thread:

The fuzzyMatch is marked as async, but is not currently doing anything asynchronous. Having the method signature reflect what is going on may make it easier to reason about one’s code.
To that end, now that we realize that fuzzyMatch runs synchronously, it becomes apparent that if it runs slowly, it will block the current thread. And because Task { ... } runs on the current actor, you will end up blocking the main thread. You should consider using Task.detached to get it on a background thread. But mark searchResults as being on the main actor.
If you cancel the Task, it will not stop fuzzyMatch that is underway. It should check for cancelation.

So, pulling that all together, perhaps:

struct ContentView: View {
    @StateObject var modelData: ModelData()

    @State var searchText = ""
    @MainActor @State var searchResults: [Item] = []
    @State var searchTask: Task<[Item], Error>?

    let fuseSearch = Fuse()

    var body: some View {
        NavigationStack {
            ...
        }
        .searchable(text: $searchText)
        .onChange(of: searchText) { newQuery in
            Task {
                searchTask?.cancel()

                let task = Task.detached {
                    try await Task.sleep(for: .seconds(0.5)) // debounce; if you don't want debouncing, remove this, but it can eliminate annoying updates of the UI while the user is typing
                    return try await fuzzyMatch(items: modelData.items, searchText: newQuery)
                }
                searchTask = task

                searchResults = try await task.value
            }
        }
    }

    func fuzzyMatch(items: [Item], searchText: String) throws -> [Item] {
        try items.filter {
            try Task.checkCancellation()
            return (fuseSearch.search(searchText, in: $0.name)?.score ?? 1) < 0.25
        }
    }
}

Async search bar

2 Answers2