HarmonyOS 搜索功能

点击搜索图标，直接切换至搜索页面，实时监控搜索框内容并且实时搜索。
HarmonyOS
Excelsior_abit
2024-12-24 16:37:35
1104浏览
回答 1
按赞同
按时间
Heiang
示例参考如下：
//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)}`)
      }
    })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
2024-12-24 18:09:47
如何写精华回答，获更多曝光？
发布
51CTO

51CTO博客

51CTO学堂

HarmonyOS 搜索功能

订阅鸿蒙技术特刊，精选内容抢先看
