小功能小程序模糊搜索
搜索也是小程序常见的小功能，这是一个模糊的搜索案例，实际开发中建议将搜索框内容传递到后台，在后台查询后返回商品列表。 请不要过度消耗资源。
实现功能如下
(1)找不到商品时显示提示信息，找到商品时显示商品清单
(2)清空搜索框后会显示搜索历史记录，可以删除历史记录。 单击历史记录为搜索框分配值
view代码如下所示
view class=' top ' view class=' top search ' view class=' frame ' input value=' { shooping text } } ' bindinput ' shoppping viewviewclass=' history ' wx 3360 if=' { history } } ' view class=' history } textimagesrc=' http://photo.Wei tanxia.cn upload html5_ 2021-03-10 _ 6048401 a4fff4. png ' mode=' width fix ' sty ys bind tap=' clean history '/image/viewviewviewviewwce ' wx 3360 key=' ' bind tap=' textfz ' { item }/text/view/viewviewclass=' none ' wx : if=' { { none view } } ' imme upload html5_ 2021-03-10 _ 60484064 e27dc.png ' mode=' width fix ' style=' width 336020 % '/image text抱歉，相关upload html5_ 2020-08-23 _ 5f 424 f8aa 953 b.JPEG ' mode=' width fix '/image
. top { width: 100%； background-color: #f7f7f7； } .topsearch { width: 90%； 边距左：5%的5%； display :闪存； padding: 2% 0； align-items3360中心； }.frame { background-color : white； width: 75%； border-radius: 20rpx； padding: 0 3%； }.frame input { font-size :24 rpx； 边距：6rpx 0； } .topsearchtext { width: 10%； 边距左：5%的5%； color: #a8a7a7fa； }.history { background-color : white； padding: 4% }.history _ title { font-size :30 rpx； display :闪存； justify-content 3360 space-between； color: #a8a7a7fa； align-items3360中心； } .history_text { padding: 4% 0； display :闪存； 灵活写入：写入； }.history _ texttext { background-color : # f7f 7； padding: 1% 3%； 边距：2%； border-radius: 40rpx； 字体大小： 30 rpx； }.history _ text : first-child { margin-left : } .none{ margin-top: 10%； display :闪存； align-items3360中心； 内容：中心； flex-direction :列； } .swiper_con { width: 96%； 边距-左：2%； display :闪存； 灵活写入：写入； }.swiper _ con _ view { width :48 %； height: 530rpx； background-color: white； 边距： 10 rpx 0； }.swiper _ con _ view : nth-child (even ) { margin-left: 4%； }.swiper _ con _ view _ view { margin-top :5 %； display :闪存； align-items3360中心； } js代码如下所示
page () data: )显示shoopingtext: '，/搜索框值history: false，/历史记录noneview: false， //提示未找到shoppinglist: false商品列表sea: true，//title: false，historyArray: []，//历史数组，new //历史数组shoopingarray3360[添加] images : ' http://photo.Wei tianxia.cn/upload html5_ 2020-08-23 _ 5f 424 F8 aa 953 b.cn { id: 1、images : ' http://photo.Wei tianxia.cn/upload html5_ 2020-07-01 _ 5e fc5 ad 706726.jppl sold 3360 ' 78箱//清除历史记录cleanhistory:function(e ) this.setdata { history : false，//隐藏历史记录//历史记录排列newArray: []，shooping //搜索search3360function(e ) varsearchtext=this.data //搜索框中的值var sss=true； 搜索文本！=' ' ) { //将搜索框中的值转换为历史数组this.data.history array.push (search text )； //模糊查询循环查询数组中的title字段for (varindexinthis.data.shooping array ) varnum=this.data.shooping array [ index ].tite if (数字！=-1 ) ) (/不匹配的为this.setdata ) ([temp]:1，) ) sss=false //隐藏缺少提示(}this.setdata ) history 3360 /隐藏//隐藏找不到提示shoppinglist: true，显示//商品列表sea: false，显示//图像new array 3360 this.data.history array//新的{noneview3360true，//提示表示找不到shoppinglata隐藏商品列表sea: false，history: false， ///隐藏历史记录} }、//搜索框值shoppinginput3360function(e )//删除input值为空时if(e.detail.value=' ) (this.setdata ) 所有商品列表的状态为0f or (varindexinthis.data.shooping array ) ) lettemp=' shooping array [ ' index ' ].status '； this.setdata({[temp]:}}this.setdata ) { shooping text : e.detail.value }，/单击历史记录以分配给搜索框
如果找不到商品，将显示以下内容
历史检索历史显示
找到的商品的展示
搜索并删除商品进行展示
结束~~