微信小程序用前端数据和js实现模糊查询

效果图：

list示例：

[“绿色小蛋糕”,“水果蛋糕”,“粉色纸杯蛋糕”,“巧克力蛋糕切片”,“紫色纸杯蛋糕”,“绿蛋糕”,“粉色小蛋糕”]

wxss：

/* 搜索栏 */
 .scroll-view {
  width: 80%;
  position: absolute;
  top: 80rpx;
  left: 80rpx;
  background-color: white;
  -moz-box-shadow: 0px 0px 2px #e2e2e2;
  -webkit-box-shadow: 0px 0px 2px #e2e2e2;
  box-shadow: 0px 0px 2px #e2e2e2;
}
.user-name {
  width: 100%;
  padding: 20rpx;
  font-size: 33rpx;
  border-bottom: 1px solid #e2e2e2;
}
.searchView {
  width: 100%;
  height: 80rpx;
  z-index: 1;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
}
 
 
.search {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
 
.search .input {
  display: flex;
  justify-content: center;
  width: 80%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50rpx;
}
 
.search .input input {
  width: 100%;
  height: 100%;
  font-size: 35rpx;
  /* text-align: center; *//* background-color: #e5dede; */
  padding: 0 50rpx;
  border-radius: 50rpx;
}
 
.search .click {
  width: 10%;
  height: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

js：

//从搜索的地方到页面详情 传参跳过去，这是在结果之后再跳到对应的商品详情页面
  toDetailByName: function (e) {
    var that=this;
    console.log( "点击的搜索结果"+that.data.searchresult[(e.currentTarget.dataset.obj)])
    var searchname = that.data.searchresult[(e.currentTarget.dataset.obj)];
    //遍历产品列表去找一样的，然后拿到里面的id嘛
    var searchid;
    for(var t=0;t<that.data.productlist.length;t++){
      if (that.data.productlist[t].name==searchname){
        searchid = that.data.productlist[t].id;
      }
     
    }
    wx.navigateTo({
      url: '/pages/details/index?id=' + searchid

    })
  },


  // 搜索栏input回调，这是用来模糊查询并且显示结果的
  searchValue: function (e) {
  
    var value = e.detail.value
    var that = this;
    
    var list1 = that.data.searchlist
    console.log("搜索的目标数组" + JSON.stringify(list1))
    if (value == '') {
      that.setData({
        viewShowed: false,
      });
    } else {
      //“这里需要特别注意，不然在选中下拉框值的时候，下拉框又出现”
      if (e.detail.cursor) { //e.detail.cursor表示input值当前焦点所在的位置
        var arr = [];
        for (var i = 0; i < list1.length; i++) {
          if (list1[i].indexOf(value) >= 0) {
            arr.push(list1[i]);
          }
        }
        console.log("搜索结果:"+arr)
        that.setData({
          viewShowed: true,
          searchresult: arr
        });
      }
    }
  },

wxml：

<!-- 搜索栏 -->
<view class="searchView">
  <view class="search" style="background-color:{{scrollTop>=170 ? 'white' : ' rgba(255, 255, 255, 0)'}};padding-top:10rpx">
    <view class="search input" style="background-color:{{scrollTop>=170 ? '#E1E1E1' : ' rgba(255, 255, 255, 0.6)'}};">
      <input placeholder='请输入内容' bindinput="searchValue" bindconfirm="search" value='{{searchValue}}'></input>

      <scroll-view class='scroll-view' wx:if='{{viewShowed}}' scroll-y>
      <view wx:for="{{searchresult}}" wx:key="{{index}}" class="msg-item " >
        <view class='user-name' bindtap='toDetailByName' data-obj='{{index}}' data-index="{{index}}" >{{item}}</view>
      </view>
      </scroll-view>

      <!-- <view class="search click">
        <icon type="search" size='36rpx' catch:tap="search" style='margin-right:20rpx;'></icon>
      </view> -->
    </view>
    <!-- <view class="search click">
      <icon type="search" size='50rpx' catch:tap="search"></icon>
    </view> -->
  </view>
</view>