探索、思考、创造、分享

数据驱动、坚持为客户提供有价值的服务和内容

当前位置:首页>小程序资讯
微信小程序模糊查询的实现
来源:南京小程序开发 发布时间:2023-10-20点击:112

1.首先我们要先在wxs里面新建一个goodFilter.wxs文件

// 列表筛选方法
// List为需要筛选的列表,mytext是筛选所需要的条件,返回的为一个模糊查询的列表
function ListFilter(List,mytext){
  return List.filter(function(item){
    return item.indexOf(mytext) > -1}
  )
}
module.exports = ListFilter

2.index.js文件

Page({
  data: {
    goodsList:["辣条","薯片","可乐","元气森林","蛋糕","面包"],
    mytext:"",
    display:false,
    xzname:""
  },
//键盘输入时触发调用的函数
handleinput(ev){
  console.log(ev.detail.value)
  this.setData({
    mytext:ev.detail.value
  })
},
//输入框聚焦时触发调用的函数
handlefocus(){
  console.log(this.data.display)
  this.setData({
    display:true
  })
},
//输入框聚焦时触发调用的函数
handletap(e){
  console.log(e)
  var id = e.currentTarget.dataset.id
  console.log(id)
  this.setData({
    display:false,
    xzname:id,
  })
},
// 输入框失去焦点时触发调用的函数
handleblur(){
  console.log(this.data.display)
  console.log("handleblur")
  this.setData({
  //  display:false
  })
},
})

3.index.wxml文件





  
    {{item}}
  

3.index.wxss文件

.mm{
  width: 65%;
  border: 1rpx solid green;
  height: 50rpx;
}

4.效果图

 

 

  • 上一篇:怎么在微信小程序中对数组赋值
  • 下一篇:校园外卖小程序怎么做?做一个的费用大概是多少?
  • 版权备注
    最新资讯
    2023-12-08
    微信小程序开发常见问题解答
    (2)选择模板的方式去开发微信小程序,它的开发流程就比较简化,这种开发方式的流程相对简单,当然整个流···
    2023-12-08
    《课题中期报告》PPT模板下载
    《课题中期报告》PPT模板 43页1MB 本文档由 “ 格嫒 ” 提供并上传2021-09-01 ···
    2023-12-08
    蛋糕商家如何为小程序疯狂吸粉,成为人气店铺,诀窍都在这了!
    互联网时代很多蛋糕甜品商家都将视线转向了小程序,临漳县的王先生也是其中之一,他在搭建小程序后,运用五···
    2023-12-08
    微信小程序申请注册会员
    微信小程序是指在微信内部运行的小型应用程序,用户可以通过微信扫描二维码或者搜索小程序名称进入应用程序···
    2023-12-08
    🍉小程序优惠券引流实操
    🍉小程序运营推广引流-优惠券实战篇之前讲了很多小程序推广引流的方法这些方法都只是方向,没经验实操教难···
    随机资讯
    2023-10-25
    微信小程序怎么去推广,获得更高的广告收益?
    今天给大家分享一个微头条蓝海项目,无需推广,无需客源,第一天就能看到收益。每天只需要利用业余时间写短···
    2023-08-22
    小程序开发花钱到底多不多?
    1、数据信息服务器的搭建每一个互联网企业经营范围不一样,但基本上现今线上业务,都需要一定程度的启用海···
    2023-10-08
    公众号怎么跟小程序连接
    公众号文章怎么链接腾讯公益小程序公众号文章链接腾讯公益小程序方法360问答:1、登录到公众号管理后台···
    2023-09-01
    制作奖状的微信小程序有哪些呢
    制作喜报的微信小程序制作喜报的微信小程序步骤:乎梁液1.打开手机微信,点击搜索;喜报,进入。2.点击···
    2023-08-10
    公司做小程序工资怎么样
    疫情期间减发工资的程序可以如何操作法律主观:疫情期间公司应按月发工资。职工未提供正常劳动的,用人36···
    友情链接: 南京网站建设 南京小程序开发 北京网站建设 网站仿制 深圳小程序开发