小程序如何实现模糊搜索功能

本文小编为大家详细介绍“小程序如何实现模糊搜索功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“小程序如何实现模糊搜索功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

读到这里，这篇“小程序如何实现模糊搜索功能”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。