UISearchBar 在 UITableView 由 Rxswift

Question

我使用 RxSwift 在我的 tableview 中显示人员列表，我的 tableview 有两个部分，第一个是旧搜索，第二个是所有人员。现在我不知道当用户在 UISearchBar 的文本字段上输入名称时我应该如何过滤人员。

这是我的人模型：

struct PersonModel {
    let name: String
    let family:String
    let isHistory:Bool
}

这是我的 ContactsViewModel

struct SectionOfPersons {
    var header: String
    var items: [Item]
}

extension SectionOfPersons: SectionModelType {
    typealias Item = PersonModel

    init(original: SectionOfPersons, items: [SectionOfPersons.Item]) {
        self = original
        self.items = items
    }
}

class ContactsViewModel {

    let items = PublishSubject<[SectionOfPersons]>()

    func fetchData(){

        var subItems : [SectionOfPersons] = []

        subItems.append( SectionOfPersons(header: "History", items: [
            SectionOfPersons.Item(name:"Michelle", family:"Obama", isHistory:true ),
            SectionOfPersons.Item(name:"Joanna", family:"Gaines", isHistory:true )
        ]))
        subItems.append( SectionOfPersons(header: "All", items: [
            SectionOfPersons.Item(name:"Michelle", family:"Obama", isHistory:false ),
            SectionOfPersons.Item(name:"James", family:"Patterson", isHistory:false ),
            SectionOfPersons.Item(name:"Stephen", family:"King", isHistory:false ),
            SectionOfPersons.Item(name:"Joanna", family:"Gaines", isHistory:false )
        ]))

        self.items.onNext( subItems )
    }

}

这是我的 ContactsViewController：

class ContactsViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var searchBar: UISearchBar!

    private lazy var dataSource = RxTableViewSectionedReloadDataSource<SectionOfPersons>(configureCell: configureCell, titleForHeaderInSection: titleForHeaderInSection)

    private lazy var configureCell: RxTableViewSectionedReloadDataSource<SectionOfPersons>.ConfigureCell = { [weak self] (dataSource, tableView, indexPath, contact) in
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "ContactTableViewCell", for: indexPath) as? ContactTableViewCell else { return UITableViewCell() }
        cell.contact = contact
        return cell
    }

    private lazy var titleForHeaderInSection: RxTableViewSectionedReloadDataSource<SectionOfPersons>.TitleForHeaderInSection = { [weak self] (dataSource, indexPath) in
        return dataSource.sectionModels[indexPath].header
    }

    private let viewModel = ContactsViewModel()
    private let disposeBag = DisposeBag()

    var showContacts = PublishSubject<[SectionOfPersons]>()
    var allContacts = PublishSubject<[SectionOfPersons]>()

    override func viewDidLoad() {
        super.viewDidLoad()

        bindViewModel()
        viewModel.fetchData()
    }

    func bindViewModel(){

        tableView.backgroundColor = .clear
        tableView.register(UINib(nibName: "ContactTableViewCell", bundle: nil), forCellReuseIdentifier: "ContactTableViewCell")
        tableView.rx.setDelegate(self).disposed(by: disposeBag)

        viewModel.items.bind(to: allContacts).disposed(by: disposeBag)
        viewModel.items.bind(to: showContacts).disposed(by: disposeBag)
        showContacts.bind(to: tableView.rx.items(dataSource: dataSource)).disposed(by: disposeBag)

        searchBar
            .rx.text
            .orEmpty
            .debounce(0.5, scheduler: MainScheduler.instance)
            .distinctUntilChanged()
            .filter { !$0.isEmpty }
            .subscribe(onNext: { [unowned self] query in

                ////// if my datasource was simple string I cand do this
                self.showContacts = self.allContacts.filter { $0.first?.hasPrefix(query) } // if datasource was simple array string, but what about complex custome object?!

            })
            .addDisposableTo(disposeBag)

    }
}

感谢您的答复。

Answer 1

你不需要这两个PublishSubjects在你的ContactsViewController. 您可以将从 UISearchBar 和您的 viewModel 获得的 Observable 直接绑定到您的 UITableView。要使用您的查询过滤联系人，您必须分别过滤每个部分。我为此使用了一个小辅助函数。

所以这就是我所做的

1. 去掉showContacts和allContacts属性
2. 创建一个queryObservable，它发出用户在搜索栏中输入的文本（不要过滤掉空文本，当用户删除搜索栏中的文本时，我们需要它来带回所有联系人）
3. 将queryObservable 和viewModel.itemsObservable 合并为一个 Observable
4. 使用此 observable 过滤所有带有查询的联系人。
5. 将该 Observable 直接绑定到 table view rx.items

我使用了combineLatest所以每当查询或 viewModel.items 更改时表视图都会更新（我不知道所有联系人的列表是静态的还是添加/删除联系人）。

所以，现在你的bindViewModel()代码看起来像这样（我感动tableView.register(...)于viewDidLoad）：

func bindViewModel(){
    let query = searchBar.rx.text
        .orEmpty
        .distinctUntilChanged()

    Observable.combineLatest(viewModel.items, query) { [unowned self] (allContacts, query) -> [SectionOfPersons] in
            return self.filteredContacts(with: allContacts, query: query)
        }
        .bind(to: tableView.rx.items(dataSource: dataSource))
        .disposed(by: disposeBag)
}  

这是使用查询过滤所有联系人的函数：

func filteredContacts(with allContacts: [SectionOfPersons], query: String) -> [SectionOfPersons] {
    guard !query.isEmpty else { return allContacts }

    var filteredContacts: [SectionOfPersons] = []
    for section in allContacts {
        let filteredItems = section.items.filter { $0.name.hasPrefix(query) || $0.family.hasPrefix(query) }
        if !filteredItems.isEmpty {
            filteredContacts.append(SectionOfPersons(header: section.header, items: filteredItems))
        }
    }
    return filteredContacts
}

我假设您想根据查询检查人员的姓名和家庭。

还有一件事：我删除了debounce因为你过滤了一个已经在内存中的列表，这真的很快。您通常会debounce在搜索栏中输入内容触发网络请求时使用。