前端开发微信小程序实现列表搜索功能

前端技术开发的汽车比赛小游戏

web前端开发技术聂常红

目前前端开发用到的技术

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//页面加载时 显示所有数据
  })
  }

})

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

web前端开发技术储久良答案

web前端技术开发

web前端开发技术的实践教学