搜索框的输入与失去焦点事件控制搜索结果(微信小程序)
程序员文章站
2022-05-29 10:57:24
...
1、实现输入框输入完成时显示数据渲染模块
输入框数据清空时,显示正常模块
思想:input事件 监听输入框的值(用于判断当数据为空时 ,搜索div不渲染)
blur 失去焦点事件(用于监听当输入完成时,获取后台数据,控制搜索div 渲染)
如图1 输入过程不渲染数据 失去焦点时渲染数据
清空 数据时 显示如图2页面
代码如下:本事例为微信小程序
js
search(e) {
if (!e.detail.value) {
this.setData({
show: false, //控制div的切换
value:''
})
} else {
this.setData({
value: e.detail.value
})
}
},
//输入框失去焦点
searchblur() {
if (this.data.value) {
this.setData({
show: true
})
this.bookSearch()
} else {
this.setData({
show: false,
searchData:[]
})
}
},