欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

搜索框的输入与失去焦点事件控制搜索结果(微信小程序)

程序员文章站 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:[]
      })
    }

  },