小程序模实现糊搜索功能

本文实例为大家分享了小程序模实现糊搜索功能的具体代码，供大家参考，具体内容如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。