Generic Searchable SwiftUI View

SearchView

This proof of concept demonstrates how to natively implement a generic SearchView using Swift & SwiftUI APIs. The project was initiated in response to a request from the Swift() Telegram Group.

Example Projects

Explore detailed examples here on using SearchView in these sample applications:

Example Country search app	Example Frutes search app

Understanding `SearchView`: An In-Depth Guide

The SearchView struct in Swift offers a versatile and customizable search interface for SwiftUI applications. This guide explores its components, functionality, and how to effectively integrate it into your projects.

Core Concepts

Generic Structure

SearchView is designed with a generic structure to offer flexibility, defined by:

Item: A data model conforming to Searchable, which includes identifiable and hashable objects.
Content: The view type for displaying each item in the search results.
Value: The type of searchable properties within Item, which must be hashable.

Main Features

Searchable Properties: Pass your properties using KeyPaths to enable them to be searchable.
Dynamic Search: Dynamically updates the display based on user input and searchable properties.
Recent Searches: Manages and displays recent searches using UserDefaults.
Customizable UI: Offers customization of text elements through SearchViewConfiguration.

For The Future

I might support search tokens in a generic way as a keypath..

How It Works

Initialization

To initialize SearchView, you'll need:

An array of Item objects to search through.
KeyPaths to the searchable properties within Item.
A binding to a String that represents the current search query.
A closure (content) defining the display of each Item.

Search Functionality

Filters items based on the search query and specified searchable properties.
Provides real-time display updates as the user types.

Recent Searches

Saves recent searches to UserDefaults and displays them when the search field is focused but empty.
Includes functionality to clear recent searches easily.

Customization

SearchViewConfiguration allows for the customization of prompts, empty and no-result state messages, and more for a tailored user experience.

Usage Example

Define your data model and conform to Searchable.

struct Fruit: Searchable {
    var id: UUID = UUID()
    var name: String
    var description: String

    var idStringValue: String {
        id.uuidString
    }
}

extension Fruit {
    // Sample data
    static var example: [Fruit] {
        [
            Fruit(name: "Apple", description: "Green and red."),
            Fruit(name: "Banana", description: "Long and yellow."),
            // Add more fruits...
        ]
    }
}

Create example arrays to use in the demo:

let dataList: [Fruit] = Fruit.example

Implement SearchView in your SwiftUI view:

@State private var searchQuery: String = ""

var body: some View {
    NavigationStack {
        SearchView(
            items: dataList,
            searchableProperties: [\.name, \.description],
            searchQuery: $searchQuery
        ) { fruit, searchTerm in
            VStack(alignment: .leading) {
                Text(fruit.name).bold().foregroundColor(.blue)
                Text(fruit.description).font(.subheadline)
            }
            .padding(.vertical, 4)
        }
        .navigationTitle("Searchable Items")
    }
}

Installation

Requires iOS 17 and Xcode 15 or later.

In Xcode, navigate to File -> Swift Packages -> Add Package Dependency.
Paste the repository URL: https://github.com/cs4alhaider/SearchView.
Select the master branch or a specific version.

Author

Abdullah Alhaider, cs.alhaider@gmail.com

License

This project is licensed under the MIT License - see the LICENSE file for details.

cs4alhaider/SearchView