小程序模糊搜索功能
那些年的笔记 人气:01.写好页面布局
<!--搜索--> <view class="searchbox"> <form bindsubmit="formSubmit"> <view class="search"> <image class="search-icon" src="{{BaseURL}}/uploadFile/images/search-icon.png"></image> <view class="input-search"> <input name="value" placeholder="请输入名称" bindinput='bindInputName' /> </view> <button formType="submit" class="searchbtn">搜索</button> </view> </form> </view>
2.样式
/*搜索start*/ .searchbox { width: 100%; height: 40px; float: left; background: #fff; border-bottom: 1px solid #eee; } .search { width: 80%; height: 30px; line-height: 30px; margin: auto; background: #fff; margin-top: 5px; border: 1px solid #eee; font-family: "微软雅黑"; font-size: 14px; } .search-icon { width: 20px; height: 20px; float: left; margin-left: 5px; margin-top: 5px; } .input-search { width: 60%; height: 29px; line-height: 29px; float: left; margin-left: 5px; font-family: "微软雅黑"; font-size: 14px; } .input-search input { width: 100%; height: 29px; line-height: 29px; font-family: "微软雅黑"; font-size: 14px; } .searchbtn { height: 30px; width: 60px; line-height: 30px; float: right; text-align: center; font-family: "微软雅黑"; font-size: 14px; border-top-right-radius: 4rpx; border-bottom-right-radius: 4rpx; border-top-left-radius: 0px; border-bottom-left-radius: 0px; background: #3891f8; color: #fff; } /*end搜索*/
3.js
/********************搜索s************************/ bindInputName: function (e) { console.log("搜索" + e.detail.value); var info = this.data.baseList; var value = e.detail.value, newlists = new Array(); if (e.detail.value == '') { this.setData({ lists: info }) } else { for (var i = 0; i < info.length; i++) { if (info[i].goodsPackageFullName.indexOf(value) >= 0) { newlists.push(info[i]); //添加搜索到的物品名称 } } this.setData({ lists: newlists }) } }, //搜索 formSubmit: function (e) { var value = e.detail.value.value, info = this.data.baseList, newlists = new Array(); if (value == "") { this.setData({ lists: this.data.baseList }) } else { for (var i = 0; i < info.length; i++) { if (info[i].goodsPackageFullName.indexOf(value) >= 0) { newlists.push(info[i]); //添加搜索到的物品名称 } } this.setData({ lists: newlists }) } }, /*********************搜索e***************************/ //获取盘点记录 getTheGoodsSaveRecord: function() { var that = this; wx.request({ header: { "Content-Type": "application/x-www-form-urlencoded" }, method: 'POST', url: app.globalData.BaseURL + 'group/v1/getTheGoodsSaveRecord.html', data: { goodsSaveRecordID: that.data.goodsSaveRecordID, }, success: function(res) { console.log("获取待存取:", res.data) wx.hideLoading() var status = res.data.status; var info = res.data.info; if (status.indexOf("SUCCESS") == 0) { that.setData({ lists: info, baseList: info, }) } else { wx.showToast({ title: '获取失败!请重新获取', icon: 'none' }) } } }) },
加载全部内容