小程序如何實現模糊搜索功能

本文小編為大家詳細介紹“小程序如何實現模糊搜索功能”，內容詳細，步驟清晰，細節處理妥當，希望這篇“小程序如何實現模糊搜索功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

讀到這里，這篇“小程序如何實現模糊搜索功能”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。