[RxSwift 기초] 검색창 결과 바로보기 - 예제로 RxSwift익히기

😄안녕하세요😄

 

PilGwonKim님의 예제를 참조해서 만든 내용이에요!!

 

 

이번 연습은 검색창에 원하는 검색어를 치면 반응해서

검색어와 일치하는 결과를 보여줘보도록 할게요

 

 

 

 

스토리보드는 이렇게 구성했어요

위에 SearchBar를 이용해서

검색 결과를 TableView에 보여주고

선택하면 아래의 Label에 나타나도록 할거에요

 

 

 

 

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var selectLabel: UILabel!
    
    var items = [String]()
    let samples = ["서울", "부산", "온수", "건대", "온수", "부천", "송파", "가", "가나", "가나다", "가나다라", "가카타파하", "에이", "a", "ab", "abc", "apple", "mac", "azxy"]
    let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.delegate = self
        self.tableView.dataSource = self
        input()
    }

}

items는 검색에 따른 일치하는 문자열 결과를 보여줄 배열이구요

samples는 임의로 만든 데이터에요 이 데이터 내에서 검색을 할 수 있어요

 

 

 

 

 

 

 

class searchTableViewCell: UITableViewCell {
    
    @IBOutlet weak var blueText: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell: searchTableViewCell = tableView.dequeueReusableCell(withIdentifier: "item", for: indexPath) as? searchTableViewCell else {fatalError()}
        cell.blueText.text = self.items[indexPath.row]
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        guard let cell: searchTableViewCell = tableView.cellForRow(at: indexPath) as? searchTableViewCell else { return }
        self.selectLabel.text = cell.blueText.text
    }
    
}

cell의 identifier을  'item' 로 설정했어요

셀안에 label 변수명은 blueText에요

label 내용은 검색일치 결과가 보여질 items배열을 참조할거에요

 

그리고 셀을 클릭하면 셀의 텍스트가 선택 Label에 보일거에요

 

 

 

 

 

extension ViewController {
    private func input(){
        self.searchBar.rx.text.orEmpty
            .debounce(RxTimeInterval.microseconds(5), scheduler: MainScheduler.instance)   //0.5초 기다림
            .distinctUntilChanged()   // 같은 아이템을 받지 않는기능
            .subscribe(onNext: { t in
                self.items = self.samples.filter{ $0.hasPrefix(t) }
                self.tableView.reloadData()
            })
            .disposed(by: disposeBag)
    }
}

debounce 함수는 

작업을 받으면 해당시간뒤에 반환시켜줘요

기다리는시간사이에 새로운 값이 들어오면 전의 값은 무시되고 새로운값으로 다시 시간을 카운트해요

 

 

 

distinctUntilChanged 함수는

같은 아이템이 들어오면 반환해주지않아요

즉 같은 값을 입력하는 것을 막아줘요

 

 

예를들어

a   ab   a  

0.5초가 지나기전(요청을 하기전)

처음상태 a에서 b를추가하고 다시 b를 지우는 방식으로 입력을 한다면

처음과 결과는 똑같은 a 겠죠??

하지만 단어에 변화가 일어나서 반응을 하고 요청을 할거에요

 

처음요청은 a

다음요청도 a

가 되겟죠???

 

이렇게 같은값인데 또 요청한다면 비효율적이에요

어짜피 결과는 같을텐데말이죠

이러한 현상을 막아줄 수 있는게 이 함수의 기능이에요

 

 

 

 

 

 

입력하면 실시간으로 일치하는 문자열이 보이네요!!    끗!!!!