小程序模实现糊搜索功能
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了小程序模实现糊搜索功能的具体代码，供大家参考，具体内容如下
1.写好页面布局
<!--搜索-->
<view class="searchbox">
<form bindsubmit="formSubmit">
<view class="search">
<image class="search-icon" class="lazy" data-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.样式
.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;
}
3.js
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
})
}
},
//获取盘点记录
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'
})
}
}
})
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
