微信小程序实现搜索功能


Posted in Javascript onMarch 10, 2020

在页面search.wxml中,定义一个input输入框以及搜索的点击按钮,分别为它们绑定点击事件handleInputChange()handleSearch()的事件,同时在它们的下面定义搜索的列表,代码如下所示:

<view class="search-header">
 <input class="search-input" bindtap="handleInputChange" />
 <view class="search-btn" bindtap="handleSearch">搜索</view>
</view>

<view>
 <view wx:for="{{list}}" wx:key="{{index}}" class="item" id="{{item.id}}" bindtap="handleItemTap">
 <view>{{ item }}</view>
 <view class="item-message">{{ item.message }}</view>
 </view>
</view>

在逻辑文件search.js中,在data中存放list的数据,为空数组,存放搜索列表的数据,同时定义staticData,在里面定义inputValue,里面为空字符串,是input输入框的值,代码如下所示:

data: {
 list: []
},
staticData: {
 inputValue: ""
}

在search.js的onLoad()生命周期函数中,调用请求数据的函数getSearchResult(),这样在一进入页面的时候就会获取到所有的数据,不过由于并没有关键字keyword,需要传空字符串,代码如下所示:

onLoad() {
 this.getSearchResult("");
 },
getSearchResult(keyword) {
 wx.request({
  url: 'xxxxxx',
  data: {
  keyword: this.staticData.inputValue
  },
  method: "POST",
  header: {
  'content-type': 'application/x-www-form-urlencoded' 
  },
  success: this.getSearchResultSucc.bind(this)
 })
},

在search.js中,定义一个响应成功后的函数getSearchResultSucc(),判断响应的数据是否存在。如果存在通过this.setData()方法将响应后的数据赋值给list,如果不存在,list仍然为空数组,代码如下所示:

getSearchResultSucc(res) {
 // console.log(res)
 if (res.data.ret) {
  const result = res.data.data;
  this.setData({
  list: result
  })
 } else {
  this.setData({
  list: []
  })
 }
}

在search.js中,定义handleInputChange()函数,这个函数也是input输入框绑定的函数,传入事件对象e,然后通过e.detail.value赋值给staticData的inputValue,代码如下所示:

handleInputChange(e) {
 this.staticData.inputValue = e.detail.value;
}

在search.js中,定义handleSearch()函数,这个函数也是之前搜索按钮所绑定的函数,在这个里面重新发起一次请求,携带keyword关键字发起请求,代码如下所示:

handleSearch (keyword) {
 this.getSearchResult(keyword)
}

如果想要点击在搜索以后显示的列表,可以在列表中绑定handleItemTap()事件,传入事件对象e,通过 e.currentTaret.id去获取到点击的id,然后再通过 wx.navigateTo()方法跳转到相应的详情页,代码如下所示:

handleItemTap(e) {
 wx.navigateTo({
  url: '/pages/detail/detail?id=' + e.currentTaret.id
 })
}

知识点补充:微信小程序云开发模糊查找功能实现

//连接数据库
const db = wx.cloud.database()
var that = this
db.collection(‘newsname').where({
//使用正则查询,实现对搜索的模糊查询
_name: db.RegExp({
regexp: value,
//从搜索栏中获取的value作为规则进行匹配。
options: ‘i',
//大小写不区分
})
}).get({
success: res => {
console.log(res)
that.setData({
search_list: res.data
})
}
})

总结

到此这篇关于微信小程序实现搜索功能的文章就介绍到这了,更多相关微信小程序搜索功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
深入理解js中的加载事件
Feb 08 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
原生JS实现烟花效果
Mar 10 #Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 #Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 #Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 #Javascript
js模拟实现烟花特效
Mar 10 #Javascript
JS实现放烟花效果
Mar 10 #Javascript
JS实现烟花爆炸效果
Mar 10 #Javascript
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
Python绘制的二项分布概率图示例
2018/08/22 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
python ftplib模块使用代码实例
2019/12/31 Python
python opencv如何实现图片绘制
2020/01/19 Python
python线程join方法原理解析
2020/02/11 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
Python datetime模块的使用示例
2021/02/02 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
毕业生自我鉴定实例
2014/01/21 职场文书
培训研修方案
2014/06/06 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
求职自我推荐信
2015/03/24 职场文书
2015年纪委工作总结
2015/05/13 职场文书