如何在SwiftUI中创建自动补全TextField？支持大小写不敏感联想及选中入数组

以下是满足需求的完整实现方案，包含不区分大小写的联想建议、点击添加至指定数组的功能：

完整代码示例 #

import SwiftUI

struct AutoCompleteTextFieldView: View {
    // 预设的候选建议集合
    let allSuggestions = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"]
    // 用户输入文本
    @State private var inputText = ""
    // 存储已选中项的数组
    @State private var selectedItems: [String] = []
    
    // 实时过滤后的建议列表（不区分大小写）
    private var filteredSuggestions: [String] {
        guard !inputText.isEmpty else { return [] }
        let lowercasedInput = inputText.lowercased()
        return allSuggestions.filter { $0.lowercased().contains(lowercasedInput) }
    }
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            // 已选中项的横向标签栏
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 8) {
                    ForEach(selectedItems, id: \.self) { item in
                        Text(item)
                            .padding(.horizontal, 12)
                            .padding(.vertical, 6)
                            .background(Color.blue.opacity(0.2))
                            .cornerRadius(16)
                    }
                }
            }
            
            // 输入文本框
            TextField("输入内容...", text: $inputText)
                .padding(.horizontal, 12)
                .padding(.vertical, 8)
                .border(Color.gray.opacity(0.3))
                .cornerRadius(8)
            
            // 自动补全建议列表
            if !filteredSuggestions.isEmpty {
                List(filteredSuggestions, id: \.self) { suggestion in
                    Text(suggestion)
                        .onTapGesture {
                            selectedItems.append(suggestion)
                            inputText = "" // 清空输入，方便继续添加新项
                        }
                }
                .listStyle(.plain)
                .frame(height: CGFloat(filteredSuggestions.count * 44))
            }
        }
        .padding()
    }
}

struct AutoCompleteTextFieldView_Previews: PreviewProvider {
    static var previews: some View {
        AutoCompleteTextFieldView()
    }
}

核心实现要点 #

• 不区分大小写联想：将输入文本和候选项统一转为小写后进行包含判断，确保匹配逻辑不区分大小写
• 实时过滤：通过计算属性filteredSuggestions，每次输入变化时自动更新建议列表
• 选中交互：点击建议项后，直接将其追加到selectedItems数组，并清空输入框，提升操作流畅度
• UI优化：顶部横向展示已选中的项，建议列表固定高度避免占用过多屏幕空间，整体布局简洁直观

可扩展方向 #

• 若候选项来自网络请求，可将allSuggestions迁移至ObservableObject类型的ViewModel中，用@Published属性管理
• 可为已选中的标签添加删除按钮，支持用户移除错误选择的项
• 可在建议项中高亮显示与输入文本匹配的部分，提升视觉体验

内容的提问来源于stack exchange，提问作者Akshay Gandal