[Day17] searchable

https://www.hackingwithswift.com/books/ios-swiftui/making-a-swiftui-view-searchable

https://developer.apple.com/documentation/swiftui/view/searchable(text:placement:prompt:)-18a8f

searchable(text:placement:prompt:) | Apple Developer Documentation

 

 

searchable

- search bar를 뷰에 추가할 수 있는 modifier

- 문자열 속성을 바인딩하여 사용자 입력시 데이터를 필터링 할 수 있음 

 

import SwiftUI

struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            Text("Searching for \(searchText)")
                .searchable(text: $searchText, prompt: "Look for something")
                .navigationTitle("Searching")
        }
    }
}

위의 코드 구현 시 나타나는 화면

- 생성한 View 안에 반드시 NavigationStack을 생성해야 함. 

    - 그렇지 않으면 search box를 넣을 위치가 없음 

 

- searchable()은 데이터 필터링과 함께 사용되는 것이 가장 좋음 

- @State property 가 변경될 때, SwiftUI는 body property를 다시 호출함 → 필터링을 처리할 수 있음 

struct ContentView: View {
    @State private var searchText = ""
    let allNames = ["Subh", "Vina", "Melvin", "Stefanie"]

    var filteredNames: [String] {
        if searchText.isEmpty {
            allNames
        } else {
            allNames.filter { $0.localizedStandardContains(searchText) }
            // localizedStandardContains
                // 대소문자와 악센트를 자동으로 무시하므로 사용자 입력 기반으로 항목 검색시 가장 좋은 형태
        }
    }

    var body: some View {
        NavigationStack {
            List(filteredNames, id: \.self) { name in
                Text(name)
            }
            .searchable(text: $searchText, prompt: "Look for something")
            .navigationTitle("Searching")
        }
    }
}

 

data filtering이 진행된 모습

 

- searchbar 는 자동으로 숨겨져 있다가, 화면을 밑으로 당기면 드러남