鸿蒙元服务项目实战：终结篇之备忘录搜索功能实现

前言

本文基于Api12

其实前边三篇文章，我们已经把要实现的功能都进行实现了，无论是列表展示，还是数据编辑，样式修改，换肤等等，已经达到了可交付的状态，当然了，目前的这个小项目也已经上架到了鸿蒙系统的应用商店，名字是随心记，大家可以边做项目边进行体验，本篇文章，会把最后一点的搜索功能实现，另外再总结一下这个小项目用到的知识点。

我们可以简单看下，目前已经完成的效果。

备忘录首页，条目颜色跟着皮肤联动。

鸿蒙元服务项目实战：终结篇之备忘录搜索功能实现

内容编辑页面，可以设置样式和换肤。

鸿蒙元服务项目实战：终结篇之备忘录搜索功能实现

搜索功能实现

目前，搜索功能是和列表页绑定在一起的，一是共用组件，减少页面和代码，二是，本身功能并不复杂，合并在一个页面也更加直观表达。

点击搜索框，输入内容进行搜索后，过滤出和搜索内容匹配的数据进行展示，点击搜索框右边的叉号，就还原所有的数据。

针对之前的列表数据加载，我们只需要改造一番即可，增加关键搜索词，搜索时传递，其它调用时不传，并使用filter函数进行过滤和搜索匹配的数据。

doData(keyWord?: string) {
    try {
      this.doContentEmpty()
      this.mListContentBean = []
      DataPreferences.getInstance().getAllSync().allKeys?.forEach((key) => {
        let content = DataPreferences.getInstance().getSync<string>(key)
        let bean = JSON.parse(content) as ListContentBean
        this.mListContentBean.push(bean)
        if (DataPreferences.getInstance().getAllSync().allKeys?.length == this.mListContentBean.length) {
          //排序
          this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)

          if (keyWord != undefined) {
            this.mListContentBean = this.mListContentBean.filter(item => item.title?.indexOf(keyWord) != -1);
          }
        }
      })
    } catch (e) {
    }
  }

UI组件

Search({ placeholder: "搜索……" })
        .margin({ left: 10, right: 10, top: 10 })
        .onSubmit((value) => {
          //搜索
          this.doData(value)
        })
        .onChange((value: string, _?: PreviewText) => {
          if (value == "") {
            //清空
            this.doData()
          }
        })