js:
data: {
// 数据源
source:[
"vivo x7",
"vivo x9",
"vivo x21",
"vivo s7",
"vivo s9",
"vivo s21",
"vivo s29"
],
// 搜索结果
ret:[],
// 延时标识
timer:null
},
// 输入搜索词
search(evt){
// 清除之前动画
clearTimeout(this.data.timer);
this.data.timer=setTimeout(()=>{
// 录入信息
let value=evt.detail.value;
if(value==''){
this.setData({ret:[]})
return;
};
// 数据源
let source=this.data.source;
// 定义正则
let reg=new RegExp(value);
let ret=[];
// es6提供
ret=source.filter((item,key)=>{
return reg.test(item);
})
this.setData({ret})
},800)
},
页面渲染:
<view >
<input placeholder="请输入要搜索的值" type="search" bindinput="search"/>
</view>
<view >
<block wx:for="{{ret}}" wx:key="ret">
<view>{{item}}</view>
</block>
</view>
样式:
input{
width: 100%;
height: 100rpx;
line-height: 100rpx;
border: 1rpx solid aqua;
border-radius: 20%;
}