微信小程序实现搜索功能


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 相关文章推荐
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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 无限级数据JSON格式及JS解析
2010/07/17 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
session 加入redis的实现代码
2016/07/15 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
小学生植树节活动总结
2014/07/04 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫