見出し画像

SearchBarの基本的な使い方

◉サンプルアプリ

SearchBarに打ち込んだ文字にヒットするワードのみを表示する

画像1


・stodyboardの装飾

Label , searchBar , tableViewの3つを配置

画像2


コード全体です



import UIKit

class ViewController: UIViewController {
   
   @IBOutlet weak var titleLabel: UILabel!
   @IBOutlet weak var searchBar: UISearchBar!
   @IBOutlet weak var tableView: UITableView!
   
   //tableViewに表示するための配列を作成してsearchResultに入れ込む
   private var fruitsArray: [String] = ["Banana", "Apple","Grape","Orange","Pinapple","Mango","Strawberry","Watermelon"]
   private var searchResult = [String]()
   
   override func viewDidLoad() {
       super.viewDidLoad()
       setupView()
   }
   
   //画面のどこかをタッチしたときにキーボードを閉じる
   override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
       self.view.endEditing(true)
   }
   
   //初期画面設定
   private func setupView() {
       searchBar.delegate = self
       searchBar.enablesReturnKeyAutomatically = false
       tableView.delegate = self
       tableView.dataSource = self
       searchResult = fruitsArray
   }
   
}

//tableViewの設定
extension ViewController: UITableViewDelegate, UITableViewDataSource {
   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       return searchResult.count
   }
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
       cell.textLabel?.text = searchResult[indexPath.row]
       
       //セルがタップされた時のハイライトを表示しないようにする
       cell.selectionStyle = UITableViewCell.SelectionStyle.none
       
       return cell
   }
   
}

//searchBarで検索ボタンを押した時の処理
extension ViewController: UISearchBarDelegate {
   func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
       searchBar.endEditing(true)
       searchResult.removeAll()
       if(searchBar.text == "") {
           searchResult = fruitsArray
       } else {
           for data in fruitsArray {
               if data.contains(searchBar.text!) {
                   searchResult.append(data)
               }
           }
       }
       tableView.reloadData()
       print(searchResult)
   }
   
}


不明点等有ればコメントしてください〜


以上です。



この記事が気に入ったらサポートをしてみませんか?