前端之微信小程序搜索

wxml:

<view class="container">    <input type='text' confirm-type='search' bindinput='input1'  style='border:1px solid #f00'/>    <view wx:for="{{hosList}}" wx:for-item="h">        <text wx:if="{{h.show}}">{{h.name}}</text>    </view></view>

js：

Page({  data: {    hosList: []//页面显示的数据  },  input1: function (e) {//输入时 实时调用搜索方法    this.search(e.detail.value)  },  search: function (key) {//搜索方法 key 用户输入的查询字段    var This = this;    var hosList = wx.getStorage({      key: 'hosList',      success: function (res) {//从storage中取出存储的数据        if (key == "") {//用户没有输入 全部显示          This.setData({            hosList: res.data          })          return;        }        var arr = [];//临时数组 用于存放匹配到的数据        for (let i in res.data) {          if (res.data[i].search.indexOf(key) >= 0) {    //查找                   res.data[i].show = true;//匹配到的数据显示            arr.push(res.data[i])          }        }        if (arr.length == 0) {          This.setData({            hosList: [{ show: true, name: '无相关数据' }]          })        } else {          This.setData({            hosList: arr//找到的数据在页面显示          })        }      },    })  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    var hosList = [      { id: 101, name: "杭州第一医院", show: false, search: "101杭州第一医院" },      { id: 102, name: "杭州第二医院", show: false, search: "102杭州第二医院" },      { id: 103, name: "温州第一医院", show: false, search: "103温州第一医院" },      { id: 201, name: "温州第二医院", show: false, search: "201温州第二医院" },      { id: 202, name: "杭州儿童医院", show: false, search: "202杭州儿童医院" },      { id: 203, name: "杭州妇产医院", show: false, search: "203杭州妇产医院" },      { id: 301, name: "杭州肿瘤医院", show: false, search: "301杭州肿瘤医院" },      { id: 302, name: "杭州牙科医院", show: false, search: "302杭州牙科医院" },      { id: 303, name: "杭州猫狗医院", show: false, search: "303杭州猫狗医院" }    ]    wx.setStorage({//获取的时候存储在本地      key: 'hosList',      data: hosList,    })    this.setData({      hosList: hosList//页面加载时 显示所有数据    })  }})

思路：监听用户输入，根据用户输入的key在dataArr中查找，key为空时默认数据均不显示，遍历数组，当用户输入的key在数据数组中找到并显示放在新数组中返回页面，如果没有找到显示未找到相关数据