Implement searchbar to tableview with custom cell

Question

I created a tableview with custom cell and im struggling now to add a searchbar.

import UIKit

class ViewController: UIViewController, UITableViewDataSource {

var SVGdata = [SVG]()

override func viewDidLoad() {
    super.viewDidLoad()

}

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    createSVGdata()
}

// Create movies data
func createSVGdata() {
    SVGdata.append(SVG(SVGArtikel: "Art. 1", SVGGesetzestext: "Das darfst du nicht tun"))
    SVGdata.append(SVG(SVGArtikel: "Art. 2", SVGGesetzestext: "Und das erst recht nicht"))

}

// TableView
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return SVGdata.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "SVGCell", for: indexPath)

    let sVG = SVGdata[indexPath.row]
    if let SVGCell = cell as? SVGCell {
        SVGCell.setSVG(sVG)
    }

    return cell
}

}

There are thousands of videos how to search in a simple array. But not for my solution.

Answer 1

You can do this using UISearchBar. First add a UISearchBar in story board on the same viewController where your tableView is (Add the search bar on top of table view like iOS. Contact app) then add reference like below code:

@IBOutlet weak var searchBar: UISearchBar!

Then in viewDidLoad add delegate :

self.searchBar.delegate = self

I have two dataArray allData, filteredData. in allData I have kept all data of the table(Didn’t change it anywhere) and filteredData used to get the filtered result. So, after populating data into allData , I have done from (viewWillAppear):

filteredData = allData

So , All tableView delegates, datasources is used the filteredData.
Then make extension of your viewController (making extension is not mandatory ) to conform UISearchBarDelegate :

As you use SVGdata( I used filteredData) for tableView, after filtering you have to put all filtered data into SVGdata before reloading the table.

extension YourViewController: UISearchBarDelegate{
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    // searchText will contain user input
    // in allData I have kept all data of the table
    // filteredData used to get the filtered result
        if (searchText == ""){
            filteredData = allData
        }
        else{
            filteredData = []
        // you can do any kind of filtering here based on user input
            filteredData = allData.filter{
                $0.cName.lowercased().contains(searchText.lowercased())
            }   
        }
    // lastly you need to update tableView using filteredData so that the filtered rows are only shown
    //As you use SVGdata for tableView, after filtering you have to put all filtered data into SVGdata before reloading the table.
        self.tableView.reloadData()
    }
}

Answer 2

I know two ways of adding a search bar when you have a TableView, so I recommend you to decide first which implementation suits better for your app:

First one, if you have a UINavigationController, you can use a native implementation of the searchbar that will appear in the navigation bar. I mean, you first need a UINavitationController added to your view controller, programmatically or through storyboard. Then, you should create a UISearchController and associated to the UINavigationController. Lastly, listen for events through UISearchController Delegate occurring in navigation search bar so you can update you view.

https://www.raywenderlich.com/472-uisearchcontroller-tutorial-getting-started

The second way is a searchbar which is associated to a tableView through his header, read several tutorials until you make it.

https://www.ioscreator.com/tutorials/add-search-table-view-ios-tutorial