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

发布时间：2022-07-14 14:05:51 阅读：243 作者：iii 栏目：开发技术

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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

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

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

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

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签