微信小程序实现搜索功能


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的类、插件封装成seajs的模块的方法
Mar 12 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
使用 vue.js 构建大型单页应用
Feb 10 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
微信小程序实现音乐播放页面布局
Dec 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
我的论坛源代码(二)
2006/10/09 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python中一些深不见底的“坑”
2019/06/12 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Django多数据库联用实现方法解析
2020/11/12 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
高中生操行评语大全
2014/04/25 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
2015年底工作总结范文
2015/05/15 职场文书
培根随笔读书笔记
2015/07/01 职场文书