微信小程序实现列表搜索功能

原创 郭兴旺 随笔 学习笔记 395阅读 2017-11-21 14:16:28 举报

最近公司小程序项目需求页面实现列表搜索的功能,写了一个简单的demo

1、wxml文件

<input type='text' confirm-type='search' bindinput='input1' bindconfirm='confirm1' style='border:1px solid #f00'/>//搜索框

<view wx:for="{{hosList}}" wx:for-item="h">
<text wx:if="{{h.show}}">{{h.name}}</text>
</view>

2、js文件
Page({

data: {
hosList:[]//页面显示的数据
},
input1:function(e){//输入时 实时调用搜索方法
this.search(e.detail.value)
},
confirm1: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) {         
      res.data[i].show = false;    //所有数据隐藏      
      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: true, search: "101杭州第一医院" },
    { id: 102, name: "杭州第二医院", show: true, search: "102杭州第二医院" },
    { id: 103, name: "温州第一医院", show: true, search: "103温州第一医院" },
    { id: 201, name: "温州第二医院", show: true, search: "201温州第二医院" },
    { id: 202, name: "杭州儿童医院", show: true, search: "202杭州儿童医院" },
    { id: 203, name: "杭州妇产医院", show: true, search: "203杭州妇产医院" },
    { id: 301, name: "杭州肿瘤医院", show: true, search: "301杭州肿瘤医院" },
    { id: 302, name: "杭州牙科医院", show: true, search: "302杭州牙科医院" },
    { id: 303, name: "杭州猫狗医院", show: true, search: "303杭州猫狗医院" }
    ]//后台取得的数据( 可以是在其他页面的获取,比如登录的时候获取) show 用来控制此条数据是否显示 search 匹配搜索的内容
    wx.setStorage({//获取的时候存储在本地
    key: 'hosList',
    data: hosList,
    })
    this.setData({
    hosList: hosList//页面加载时 显示所有数据
    })
    }

})

在页面中,就能实现搜索的功能了

微信小程序实现列表搜索功能

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复