微信小程序实现搜索功能


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 相关文章推荐
Javascript 中介者模式实例
Dec 16 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
JavaScript表单验证实现代码
May 22 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
python 链接和操作 memcache方法
2017/03/04 Python
Python装饰器用法示例小结
2018/02/11 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python函数式编程实例详解
2020/01/17 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
Python读写锁实现实现代码解析
2020/11/28 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
六道php面试题附答案
2014/06/05 面试题
典型事迹材料范文
2014/12/29 职场文书
家长对孩子的寄语
2015/02/26 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python