微信小程序实现动态检索功能

使用微信小程序实现输入文字，动态检索数组内某个字段所有符合输入文字的数据；
wxml

<input type="text" placeholder="输入姓名或学号搜索" bindinput="bindSearchInput"/>
<block wx:if="{{infoList.length>0}}">
  <view wx:for="{{infoList}}" wx:key="index" style="padding-left: 10px;">
    <text>{{item.Name}}</text>
  </view>
</block>
<block wx:else>
  <view>查无此人！</view>
</block>

js

var app = getApp()
Page({
  data: {
  	infoList:[
      {id:1,Name:"张三",NameNo:"112002",age:16},
      {id:2,Name:"李四",NameNo:"01004",age:15},
      {id:3,Name:"linlin",NameNo:"01002",age:11},
      {id:4,Name:"徐楠",NameNo:"01008",age:23},
      {id:5,Name:"白素",NameNo:"01009",age:19},
      {id:6,Name:"余杭",NameNo:"01045",age:12},
      {id:7,Name:"高数",NameNo:"01023",age:11},
    ],
	origList:[],
  },
     onLoad:function(options) {
     this.data.origList = this.data.infoList;
     this.setData({
       origList:this.data.origList
     })
  },
  bindSearchInput:function (e) {
   		var that = this;
    	var Items = [];
    	// 满足一个条件
	    // Items = that.data.origList.filter(
	    //   el => el.Name.includes(e.detail.value)
	    // )
	    // 检索满足Name或NameNo的数据（任意一个满足即可！）
	   Items =  that.data.origList.filter((item)=>{
		   if((item.Name.indexOf(e.detail.value) != -1) || (item.NameNo.indexOf(e.detail.value) != -1)){
		        return item
		   }
	   })
	    
	    that.setData({
	      infoList:Items
	    })
 	},
  })

检索出来的数组根据需要直接渲染到wxml上就可以了。

1.array.filter(function(currentValue,index,arr), thisValue)
过滤array数组中的元素返回array数组内所有符合条件的值

2.includes() 方法 ： 判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

3.indexOf()
indexOf() 方法：返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
注意： indexOf() 方法区分大小写。