Skip to main content

RxSwiftを使ってUISearchBarに入力した内容をUITableViewに表示する


RxSwiftを使ってUISearchBarに入力した文字を取得する
の続編

インクリメントサーチしたいと思ってもろもろ調べた結果
RxSwiftでUiTableViewと連携できると知ったのでやってみた


・コード
これで入力した内容がそのままテーブルに表示される

class ViewController: UIViewController {
    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var tableView: UITableView!
    
    private let CELL_NAME = "Cell"

    let disposeBag = DisposeBag()
    override func viewDidLoad() {
        super.viewDidLoad()
        
        searchBar.rx.text.orEmpty
            .throttle(.milliseconds(300), scheduler: MainScheduler.instance)
            .distinctUntilChanged()
            .flatMapLatest { query -> Observable<[String]> in
                return .just([query])
        }
        .observeOn(MainScheduler.instance)
        .bind(to: tableView.rx.items) {[weak self]_tableView, row, element in
            let cellName = self?.CELL_NAME ?? ""
            let cell = _tableView.dequeueReusableCell(withIdentifier: cellName) ?? UITableViewCell(style: .subtitle, reuseIdentifier: cellName)
            
            cell.textLabel?.text = element.description
            return cell
        }
        .disposed(by: disposeBag)
    }
}

・コードの説明
Observable<[String]>でStringの配列
bind toで連携する
[weak self]は弱参照にするとのこと

・ちなみに
以下にするとインクリメントされた入力が全部表示される
これはこれで面白いけど、リストで渡すのが前提なんだなぁって思った
後どんどん追加されるけど消し方わからん

.flatMapLatest { query -> Observable<String> in
    return .just(query)

 

https://github.com/ReactiveX/RxSwift
https://qiita.com/susieyy/items/f57f9362b8e0a89023cb

関連記事:

Pocket