一、背景

页面包含搜索框和列表，列表默认展示所有数据并具有分页功能。然而，在输入关键字到搜索框时，列表未正确展示搜索结果。

二、功能实现

2.1、原代码及实现效果

import ChargeType from '../../viewModel/ChargeType'
import ChargeModel from '../../model/ChargeModel'@Component
export default struct ChargeList {@State charges:ChargeType[] = []@Link stationId:numberisLoading: boolean = falseisMore: boolean = truecontroller: SearchController = new SearchController()showPanel:()=>voidaboutToAppear(){//加载充电站数据this.chargeInfo('')}build() {Column({space:10}){//搜索Column({space:15}){Text('充电').fontColor(Color.White).fontSize(20).margin({top:30})Search({placeholder:'请输入搜索内容',controller: this.controller}).placeholderColor(Color.Gray).backgroundColor('#F5F5F5').textFont({size:18}).onChange((value: string) => {console.log('搜索的值',value)this.chargeInfo(value)})}.width('100%').height('20%').padding({left:20,right:20}).backgroundColor($r('app.color.charge_header'))//列表List({space:10}){ForEach(this.charges,(item:ChargeType) => {ListItem(){this.chargeItem(item)}.onClick(() =>{console.log('弹出充电桩数据')})})}.width('95%').layoutWeight(1).onReachEnd(() => {if(!this.isLoading && this.isMore){this.isLoading = true// 翻页ChargeModel.pageNo++this.chargeInfo('')}})}.width('100%')}//item项@Builder chargeItem(item:ChargeType){Column({space:12}){Text(item.name).fontWeight(FontWeight.Bold)Row({space:8}){Text(`￥ ${item.pricePerHour}`).fontColor($r('app.color.pile_tanan'))Text('/度').fontColor($r('app.color.limit'))Blank()Text(item.tenantName).fontSize(18).fontColor($r('app.color.pile_tanan'))Blank()Image($r('app.media.fast')).width(20)Text(`闲${item.freePileTotal}`).fontWeight(FontWeight.Bold)Text(`/${item.pileTotal}`)}.width('100%')Row({space:8}){Text(`${item.distance.toFixed(2)}km`)Image($r('app.media.location')).width(20)Image($r('app.media.imgUrl')).width(20)}}.height('100%').backgroundColor('#FFF').height(120).padding(10).borderRadius(20).alignItems(HorizontalAlign.Start)}//调取接口，获取充电站数据async chargeInfo(name){let res:any = await ChargeModel.getStations(name)if(res.responseCode === 200){let chargeRes = JSON.parse(res.result.toString())if(chargeRes.code == 0){this.charges = this.charges.concat(chargeRes.data.List)console.log('列表数据charges',this.charges.length,this.charges)this.isLoading = falseif(!chargeRes.data.List || chargeRes.data.List.length === 0){this.isMore = false}}}}
}

说明：

①页面初次加载是当前页5条数据， 翻页后加载了所有数据7条

②搜索框输入关键字：x，列表仍然展示的所有数据7条，未展示搜索后的数据

2.2、改造原代码，解决搜索失效问题

分析问题：

这个问题可能出在搜索时未能正确重置 页码值pageNo 和清空原有数据，导致搜索结果未能正确展示在列表中。 

具体操作：

①在 chargeInfo() 方法中增加一个参数来标识是否需要重置 页码值pageNo 和清空原有数据

②在搜索时调用 chargeInfo() 方法时，传入 true 来重置 页码值pageNo 和清空数据

 

2.3、最终效果

说明：

左图为默认状态，右图为搜索结果

①搜索框输入关键字后，列表展示搜索后数据

②未搜索情况下展示默认当前页数据 

为什么名字后面加英文，搜索时也是输入的英文？？？

因为我使用的电脑模拟器查看的，不能切换中文，只能输入英文，在官网搜索后得到的结果是真机调试可以输入中文，真机我还未做测试😂😂