微信小程序搜索框实现模糊查询功能【关键点!!!】

实现效果如下:
在这里插入图片描述
样式注意点

1、下拉搜索框高度自适应,但是不能超过最大高度

height: auto;
max-height: 280px;

2、主要逻辑
当输入的时候,用e.detail.value拿到输入的值
新建一个空数组,也就是你页面组要渲染的搜索后的内容
循环原来数组的字段,当某一项输入的值与字段匹配上,也就是indexOf取值大于等于0时
把匹配上的那一项push到新数组中,然后渲染

inputTyping(e) {
    let userInputValue = e.detail.value
    if(userInputValue !=''){
      if(e.detail.cursor){   //input焦点所在位置
        let arr = []
        for(let i =0; i < this.data.list1.length; i++){
          if(this.data.list1[i].indexOf(userInputValue)>=0){
            arr.push(this.data.list1[i])
          }
          this.setData({
            scrollShow: true,
            list1: arr
          })
        }
      }
    }
 }   
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值