HarmonyOS 搜索功能？

Question

点击搜索图标，直接切换至搜索页面，实时监控搜索框内容 并且实时搜索。

Answer 1

示例参考如下：

//OfferingSearch文件
/*
* Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
*/
import { SpecificContentSearch } from './specificContentSearch'

class LinkItem {
  img: ResourceStr = ''
  title: string = ''
  price: string = ''
}

@Component
export struct PafEmptyPage {
  icon: string | PixelMap | Resource = ''
  emptyDescription: string | Resource = ''

  @Builder
  buildNoPosBeyond() {
    Column() {
      if (this.icon) {
        Image(this.icon)
          .height(120)
          .width(120)
          .draggable(false)
          .autoResize(false)
          .id('Paf.EmptyPage.no_data_icon_beyond')
          .interpolation(ImageInterpolation.High)
      }
      Column() {
        Text(this.emptyDescription)
          .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
          .fontSize($r('sys.float.ohos_id_text_size_body2'))
          .fontFamily($r('sys.string.ohos_id_text_font_family_regular'))
          .fontWeight(FontWeight.Regular)
      }
      .margin({ top: 8 })
    }
    .height('80%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      this.buildNoPosBeyond()
    }
  }
}

@Entry
@Component
struct OfferingSearch {
  scroller: Scroller = new Scroller()
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  @State changeValue: string = ""
  @State searchListInfoItem: Array<LinkItem> = []
  @State listInfoItem: Array<LinkItem> = [
    {
      img: $r('sys.media.ohos_app_icon'),
      title: '春季新品精致小短裤,玻色因抗衰紧致淡纹,YYDS11',
      price: '￥100'
    },
    {
      img: $r('sys.media.ohos_app_icon'),
      title: '夏季新品精致小短裤,玻色因抗衰紧致淡纹,YYDS22',
      price: '￥100'
    },
    {
      img: $r('sys.media.ohos_app_icon'),
      title: '秋季新品精致小短裤,玻色因抗衰紧致淡纹,YYDS33',
      price: '￥100'
    },
    {
      img: $r('sys.media.ohos_app_icon'),
      title: '冬季新品精致小短裤,玻色因抗衰紧致淡纹,YYDS44',
      price: '￥100'
    },
    {
      img: $r('sys.media.ohos_app_icon'),
      title: '春季新品精致小短裤,玻色因抗衰紧致淡纹,YYDS55',
      price: '￥100'
    },
    {
      img: $r('sys.media.ohos_app_icon'),
      title: '夏季新品精致小短裤,玻色因抗衰紧致淡纹,YYDS11',
      price: '￥100'
    },
    {
      img: $r('sys.media.ohos_app_icon'),
      title: '春季新品精致小短裤,玻色因抗衰紧致淡纹,YYDS22',
      price: '￥100'
    },
    {
      img: $r('sys.media.ohos_app_icon'),
      title: '春季新品精致小短裤,玻色因抗衰紧致淡纹,YYDS33',
      price: '￥100'
    }
  ]

  getSearchListInfo(){
    if (this.changeValue) {
      this.searchListInfoItem = this.listInfoItem.filter((item, index) => {
        return item.title.indexOf(this.changeValue) != -1
      })
    }
  }

  @Builder
  PageMap(name: string) {
    if (name = 'searchContent') {
      SpecificContentSearch()
    }
  }

  @Builder
  gridListData() {
    Column() {
      Grid(this.scroller) {
        ForEach(this.changeValue ? this.searchListInfoItem : this.listInfoItem, (item: LinkItem) => {
          GridItem() {
            Column() {
              Image(item.img)
                .height(150)
              Column() {
                Text(item.title)
                  .fontSize(16)
                  .margin({ top: 4 })
                  .maxLines(2)
                  .textOverflow({
                    overflow: TextOverflow.Ellipsis
                  })
                Text(item.price)
                  .margin({ top: 4 })
                  .fontColor(Color.Red)
              }
              .padding({ left: 12, right: 12, top: 2, bottom: 12 })
            }
            .width('100%')
            .borderRadius(12)
            .backgroundColor($r('sys.color.ohos_id_color_background'))
          }
        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)
    }
    .defaultFocus(true)
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Search({ value: this.changeValue, placeholder: 'Type to search...'})
          .searchButton('搜索')
          .height(45)
          .width('100%')
          .focusOnTouch(false)
          .focusable(false)
          .enableKeyboardOnFocus(false)
          .margin({ bottom: 8 })
          .backgroundColor($r('sys.color.ohos_id_color_background'))
          .placeholderColor($r('sys.color.ohos_id_color_text_primary'))
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          .onClick(() => {
            this.pageInfos.pushPathByName('searchContent', this.listInfoItem, (popInfo: PopInfo) => {
              this.changeValue = `${popInfo.result}`
              this.getSearchListInfo()
            });
          })

        if (this.changeValue ? this.searchListInfoItem.length : this.listInfoItem.length) {
          this.gridListData()
        } else {
          PafEmptyPage({
            icon: $r('app.media.no_result'),
            emptyDescription: '没有找到此内容，请重新搜索!'
          })
        }
      }
      .width('100%')
      .height('100%')
      .padding({ top: 24, bottom: 24, left: 16, right: 16 })
      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
    }
    .width('100%')
    .height('100%')
    .hideTitleBar(true)
    .navDestination(this.PageMap)
  }
}

//SpecificContentSearch文件
import prompt from '@ohos.prompt';

class LinkItem {
  img: ResourceStr = ''
  title: string = ''
  price: string = ''
}

@Component
export struct SpecificContentSearch {
  @State changeValue: string = ''
  @State searchNewListData: LinkItem[] = []
  @State searchContentList: LinkItem[] = []
  @Consume('pageInfos') pageInfos: NavPathStack;
  controller: SearchController = new SearchController()

  searchFunc(value: string) {
    let newListData: LinkItem[] = [];

    if (this.searchContentList.length) {
      for (let i = 0; i < this.searchContentList.length; i++) {
        // 通过includes对输入的字符进行查询
        if (this.searchContentList[i].title.toLowerCase().includes(value.toLowerCase())) {
          newListData.push(this.searchContentList[i]);
        }
      }
    }
    // 判断是否有输入的值
    if (value.length !== 0) {
      this.searchNewListData = newListData
    } else {
      this.searchNewListData = []
    }
  }

  @Builder
  ListContent(param: LinkItem[]) {
    List({ space: 20, initialIndex: 0 }) {
      ForEach(param, (item: LinkItem) => {
        ListItem() {
          Row() {
            Image($r('sys.media.ohos_ic_public_search_filled'))
              .width(12)
              .height(12)
              .margin({ right: 8 })
              .fillColor($r('sys.color.ohos_id_color_titlebar_icon'))

            Text(item.title)
              .fontSize(16)
              .margin({ top: 4 })
              .maxLines(2)
              .textOverflow({
                overflow: TextOverflow.Ellipsis
              })
          }
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Start)
        }
        .height(40)
        .onClick(() => {
          this.pageInfos.pop(item.title)
        })
      })
    }
    .width("100%")
    .scrollBar(BarState.Off)
    .alignListItem(ListItemAlign.Start)
    .divider({
      strokeWidth: 1,
      color: $r('sys.color.ohos_id_color_list_separator'),
    })
  }

  @Builder
  SearchContentInfo() {
    Column() {
      Column() {
        Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
          .searchButton('搜索')
          .width('100%')
          .height(45)
          .defaultFocus(true)
          .borderColor(Color.Blue)
          .margin({ bottom: 8 })
          .backgroundColor($r('sys.color.ohos_id_color_background'))
          .placeholderColor($r('sys.color.ohos_id_color_text_primary'))
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          .onSubmit((value: string) => {
            if (!value) {
              prompt.showToast({
                message: 'The input content cannot be empty',
                duration: 2000,
                bottom: 64,
              });
              return;
            }
            this.pageInfos.pop(value)
          })
          .onChange((value: string) => {
            this.changeValue = value
            this.searchFunc(value)
          })
      }
      .margin({ left: 16, right: 16 })

      if (this.searchNewListData.length) {
        Column() {
          this.ListContent(this.searchNewListData)
        }
        .width('100%')
        .height('100%')
        .padding({ left: 12, right: 12, top: 16, bottom: 16 })
      }

      Column() {
        Text("猜你想搜")
          .fontSize(20)
          .fontWeight(FontWeight.Medium)
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
          .textAlign(TextAlign.Start)
          .margin({ bottom: 8 })

        this.ListContent(this.searchContentList)
      }
      .padding({ left: 12, right: 12, top: 16, bottom: 16 })
      .alignItems(HorizontalAlign.Start)
      .backgroundColor($r('sys.color.ohos_id_color_background'))
    }
    .width('100%')
    .height('100%')
    .padding({ top: 16, bottom: 24 })
    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
  }

  build() {
    NavDestination() {
      this.SearchContentInfo()
    }
    .title('搜索内容')
    .onReady((ctx: NavDestinationContext) => {
      // 在NavDestination中能够拿到传来的NavPathInfo和当前所处的NavPathStack
      try {
        this.searchContentList = JSON.parse(JSON.stringify(ctx?.pathInfo.param))
      } catch (e) {
        console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`)
      }
    })
  }
}