Swift中基于TableView与数组过滤实现自动补全文本框

嘿，这个自动过滤TableView的需求我之前做过好多次了，给你一套完整的实现方案，一步一步来很简单～

核心思路 #

监听TextField的文本变化，每次输入/删除字符时，用filter()方法对原始数组进行匹配过滤，然后刷新TableView展示过滤后的结果，全程不需要额外的UI组件，完全靠文本输入触发逻辑。

第一步：给TextField添加文本监听 #

首先在你的ViewController里，给TextField绑定一个编辑变化的监听事件，这样用户每输入一个字符都会触发后续的过滤逻辑。假设你的TextField叫searchTextField，原始数据数组叫dataArray，TableView叫resultTableView：

override func viewDidLoad() {
    super.viewDidLoad()
    // 绑定TextField的文本变化监听
    searchTextField.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
    // 初始化时展示全部数据
    filteredArray = dataArray
    resultTableView.reloadData()
}

第二步：实现过滤逻辑和TableView刷新 #

先定义一个过滤后的数组作为TableView的数据源，然后在监听方法里处理匹配逻辑，这里一定要注意做大小写不敏感匹配，不然用户输入小写搜不到大写内容，体验会很差：

// 过滤后的数组，作为TableView的数据源
var filteredArray: [String] = []

@objc func textFieldDidChange(_ textField: UITextField) {
    guard let searchText = textField.text else { return }
    
    if searchText.isEmpty {
        // 输入为空时，展示全部原始数据
        filteredArray = dataArray
    } else {
        // 使用filter() + localizedCaseInsensitiveContains实现大小写不敏感的模糊匹配
        filteredArray = dataArray.filter { item in
            item.localizedCaseInsensitiveContains(searchText)
        }
    }
    
    // 刷新TableView，展示最新的过滤结果
    resultTableView.reloadData()
}

第三步：配置TableView的数据源方法 #

确保TableView的数据源方法使用的是我们刚才定义的filteredArray，而不是原始数组：

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return filteredArray.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellIdentifier", for: indexPath)
    cell.textLabel?.text = filteredArray[indexPath.row]
    return cell
}

额外优化建议 #

• 如果你的数组里是自定义对象（不是字符串），只需要调整filter()里的判断逻辑就行，比如对象有个name属性，就写成item.name.localizedCaseInsensitiveContains(searchText)
• 可以加个防抖处理：用户快速输入时，不要每次字符变化都立刻触发过滤，等输入停顿0.3秒左右再执行，避免频繁刷新TableView影响性能。用Timer就能实现：

var searchDebounceTimer: Timer?

@objc func textFieldDidChange(_ textField: UITextField) {
    // 先取消之前的定时器，避免重复触发
    searchDebounceTimer?.invalidate()
    // 0.3秒后执行过滤逻辑
    searchDebounceTimer = Timer.scheduledTimer(withTimeInterval: 0.3, repeats: false) { [weak self] _ in
        guard let self = self, let searchText = textField.text else { return }
        
        self.filteredArray = searchText.isEmpty ? self.dataArray : self.dataArray.filter {
            $0.localizedCaseInsensitiveContains(searchText)
        }
        self.resultTableView.reloadData()
    }
}

这样用户快速输入时不会频繁刷新，体验会更流畅～

内容的提问来源于stack exchange，提问作者Zahurafzal Mirza