【Swift5】UISearchBarで検索機能をさくっと実装してみた

検索アプリ完成系

UISearchBarとTableViewの設置

ViewControllerにUISearchBarを設置し、コードに接続します。

今回は仮で以下の配列を宣言し、TableViewのCellに表示させます。

var arr: [String] = ["AABBCC", "BBB", "CACA", "BABA", "AAA", "CCCC", "ABOABO", "DACB", "BBAB", "PPAP", "KOKOK", "UIN", "TITI", "POI", "ADVR"]

UISearchBarDelegateの継承

ViewControllerでUISearchBarのDelegateを継承し、以下の関数を呼び出します。

func searchBarSearchButtonClicked(_ searchBar: UISearchBar)

この関数の中で、入力された文字列を含む物を配列から探す処理を記述します。

filter・containsを使用してフィルターをかける

UISearchBarのDelegate関数の中を、以下のように記述します。

func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    var filterdArr: [String] = []
    if let text = searchBar.text {
        if text == "" {
            mainView.updateView(arr: arr)
        } else {
            filterdArr = arr.filter { (str) -> Bool in
                return str.contains(text)
            }
            mainView.updateView(arr: filterdArr)
        }
    }
}

SearchBarに入力されたテキストが空だった場合は全ての要素をCellに表示されるようにしています。

テキストが入力されていた場合、その文字列を含む要素をcontainsを使って検索し

ヒットした要素を新しい配列（filterdArr）に入れてそれを表示させます。

このfilterdArrを、TableViewのるViewに渡してそれぞれの要素をCellに表示させています。

ABOUT ME

伊原 萌夏

スクール担当 兼 iOS(時々Web)エンジニア。 2019年7月に大学を一年半で辞め、大学とは別で勉強していたプログラムの世界で生きていくことを決意。翌月8月に入社。 主にSwiftのスクールを担当。