快捷導(dǎo)航

小程序模實現(xiàn)糊搜索功能

更新時間：2022年06月24日 15:32:35 作者：那些年的筆記

這篇文章主要為大家詳細(xì)介紹了小程序模實現(xiàn)糊搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序模實現(xiàn)糊搜索功能的具體代碼，供大家參考，具體內(nèi)容如下

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'
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? })
},

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: