代码拉取完成,页面将自动刷新
本示例介绍使用includes方法对数据实现模糊查询
使用说明
searchFunc(value: string) {
let newListData: ListData[] = [];
if (this.searchListData !== undefined) {
for (let i = 0; i < this.searchListData.length; i++) {
// 通过includes对输入的字符进行查询
if (this.searchListData[i].name.toLowerCase().includes(value.toLowerCase())) {
newListData.push(this.searchListData[i])
}
}
}
this.listData = newListData
}
2通过PersistentStorage进行持久化数据存储。源码参考SearchPage.ets
PersistentStorage.persistProp('searchHistoryData', [])
@StorageLink('searchHistoryData') searchHistoryData: ListData[] = []
ListItem() {
Column() {
Row() {
Image($r('app.media.search'))
.width($r('app.string.search_list_image_width'))
Text(item.name)
.fontSize($r('app.string.search_history_font_size2'))
.margin({ left: $r('app.string.search_history_text_padding_margin2') })
}
Divider()
.width('100%')
.height(1)
.margin({ top: $r('app.string.search_history_text_padding_margin1') })
}
.width('100%')
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.margin({ top: $r('app.string.search_history_text_padding_margin1') })
.onClick(() => {
if (this.searchHistoryData.includes(item)) {
return;
}
// 更新搜索历史数据
this.searchHistoryData.push(item);
// 调用动态路由相关方法实现页面跳转
DynamicsRouter.push(item.routerInfo, item.param);
})
不涉及
SearchComponent // har类型(默认使用har类型,如果使用hsp类型请说明原因)
|---model
| |---ListData.ets // 筛选数据模型
|---SearchComponent.ets // 搜索组件
|---SearchPage.ets // 搜索页面
不涉及
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。