微信小程序页面内搜索查询（无后台）

先上图，这是我要实现的效果！

当我们没有页面内没有分页又需要搜索时，我们可以直接在前端写搜索功能，这样也极大的减轻了后台查询压力。

这里实现原理用的是indexOf(string)：查询字符串是否包含某个字符
知道这个大家应该也知道怎么实现了，非常简单，下面上代码

当我们进入页面的时候肯定要进行后台查询，这里我直接模拟后台返回的json数据，先在data里定义两条一样的json

data{
	list: [{'name':'海珠门店','id':'1'},{'name':'天河门店','id':'2'}],	//这是页面需要的json
	list2: [{'name':'海珠门店','id':'1'},{'name':'天河门店','id':'2'}]	//这是查询需要的json
}

搜索方法

query(e){
    var list = this.data.list2;		//先把第二条json存起来
    var list2 = [];		//定义一个数组
    //循环去取数据
    for(var i=0;i<list.length;i++){
      var string = list[i].name;
      //查询json里的name是否包含搜索的关键词，如果有就把他装进list2数组
      if(string.indexOf(e.detail.value) >= 0){
        list2.push(list[i]);
      }
    }
    //到这里list2就已经是你查出的数据
    //如果输入的关键词为空就加载list数据，不是空就加载list2数据
    if(e.detail.value == ""){
      //加载全部
      this.setData({
        list: list
      })
    } else {
      this.setData({
        list: list2
      })
    }
  }
}

下面是wxml

<input type="text" placeholder="搜索门店" bindinput='query'></input>
<scroll-view scroll-y="{{true}}">
  <view wx:for="{{list}}" wx:key="{{key}}">
    <view>
      <view>{{item.name}}</view>
    </view>
    <view>
      <view>广东省广州市黄埔区永顺大道万科山景城一期东区</view>
    </view>
  </view>
</scroll-view>

结束

Tip:只有无分页的时候才适用
本人也只是一个菜鸟，不喜勿碰，欢迎大神来指点错误！