 |
| Photo by Ketut Subiyanto |
簡單記錄一下實作搜尋建議的方法，完整的程式在下方
struct ContentView: View {
@State private var searchText = ""
@State private var selectedSuggestion = ""
// 建議列表
@State private var suggestions: [String] = ["Apple 蘋果", "ALLSAINTS", "BOTTEGA VENETA", "COSME DECORTE 黛珂", "Nike 耐吉", "Dell 戴爾", "COS", "Zara", "Emilie Louis", "L.ERICKSON", "SPRAYGROUND", "gubami Social-法式tapas餐廳", "Sarabeth's"]
@State private var showSuggestions = false
var body: some View {
VStack {
// 搜尋欄位
TextField("Search", text: $searchText)
.padding(.horizontal, 15)
.padding(.vertical, 10)
.background(Color(.systemGray6))
.cornerRadius(8)
.padding(.top, 10)
.padding(.bottom, 5)
.onChange(of: searchText) { newValue in
showSuggestions = !newValue.isEmpty
}
// 選擇搜尋建議後的顯示
if !selectedSuggestion.isEmpty {
Text("Selected: \(selectedSuggestion)")
.padding(.top, 10)
}
if showSuggestions {
List {
ForEach(filteredSuggestions, id: \.self) { suggestion in
Text(suggestion)
.onTapGesture {
selectedSuggestion = suggestion
searchText = "" // 清空 TextField
showSuggestions = false // 隱藏建議列表
}
}
if filteredSuggestions.isEmpty {
Text("找不到品牌")
.foregroundColor(.gray)
}
}
.background(Color.white)
.cornerRadius(8)
.shadow(radius: 5)
.padding()
}
Spacer() // 添加一個間距，以便頁面內容和建議列表不重疊
}
.padding()
var filteredSuggestions: [String] {
if searchText.isEmpty {
return []
}
return suggestions.filter({ $0.localizedCaseInsensitiveContains(searchText) })
}
}
}
