使用自定义单元格将搜索栏实现到 uitableview

Posted 2023-02-27

【中文标题】使用自定义单元格将搜索栏实现到 uitableview

【英文标题】：Implement searchbar to tableview with custom cell

【发布时间】：2019-07-05 08:56:53

【问题描述】：

我创建了一个带有自定义单元格的表格视图，我现在正在努力添加一个搜索栏。

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

有数千个视频如何在一个简单的数组中进行搜索。但不适用于我的解决方案。

【问题讨论】：

您能解释一下您面临的具体问题是什么吗？您正在寻找什么样的搜索？例如：像默认 ios 联系人应用一样搜索？

我将为每个表（行）创建一些文本。搜索栏是一种过滤器。我需要显示所有包含搜索到的单词或数字的行。

我已经添加了答案，请查看

【参考方案1】：

您可以使用 UISearchBar 来做到这一点。 首先在您的 tableView 所在的同一 viewController 上的故事板上添加一个 UISearchBar（在表格视图顶部添加搜索栏，如 iOS。联系应用程序）然后添加如下代码的参考：

@IBOutlet weak var searchBar: UISearchBar!

然后在 viewDidLoad 添加委托：

self.searchBar.delegate = self

我有两个dataArray allData，filteredData。在 allData 中我保留了表的所有数据（没有在任何地方更改它）和用于获取过滤结果的过滤数据。 因此，在将数据填充到 allData 之后，我从 (viewWillAppear) 完成了：

filteredData = allData

所以，所有 tableView 委托、数据源都使用了过滤数据。 然后扩展您的 viewController（扩展不是强制性的）以符合 UISearchBarDelegate ：

当你使用SVGdata（我使用filteredData）作为tableView，过滤后你必须在重新加载表格之前将所有过滤后的数据放入SVGdata。

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()
    

【讨论】：

非常感谢您的回答。不幸的是我没有让它运行。你可以修复我的项目吗？提前谢谢

出了什么问题？你能给出那个 viewController 的屏幕截图，其中 tableview 和搜索栏包含在 StoryBoard 中吗？

【参考方案2】：

我知道当你有一个 TableView 时添加搜索栏的两种方法，所以我建议你首先决定哪种实现更适合你的应用程序：

第一个，如果您有一个 UINavigationController，您可以使用将出现在导航栏中的搜索栏的本机实现。我的意思是，您首先需要以编程方式或通过情节提要将 UINavitationController 添加到您的视图控制器中。然后，您应该创建一个 UISearchController 并关联到 UINavigationController。最后，通过 UISearchController Delegate 监听导航搜索栏中发生的事件，以便更新视图。

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

第二种方式是一个搜索栏，它通过他的标题关联到一个tableView，阅读几个教程直到你完成它。

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