小程序模实现糊搜索功能
作者：那些年的笔记
这篇文章主要为大家详细介绍了小程序模实现糊搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序模实现糊搜索功能的具体代码，供大家参考，具体内容如下
1.写好页面布局
<!--搜索-->
<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'
})
}
}
})
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。