微信小程序云开发实现搜索功能
更新时间：2022年05月22日 15:18:29 作者：Bilkan-studio
这篇文章主要为大家详细介绍了微信小程序云开发实现搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序云开发实现搜索功能，供大家参考，具体内容如下
微信小程序使用云开发实现搜索功能有两种情况，一种是简单的搜索用关键字来查询数据，另一种是模糊查询关于关键字的全部数据查询。废话不用多说直接上代码部分。
简单搜索功能实现
WXML代码段
<view class="sousuokuang"> <view class="sousuo"> <view class="shurukuang"> <input type="text" placeholder="搜索" value="" bindinput="GetSearchInput"></input> </view> <view class="sousuo_anniu" bindtap="ToSearch"> <text>搜索</text> <icon type="search" size="20"></icon> </view> </view> </view>
WXSS代码段
.sousuokuang {
width: 100%;
height: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
}
.sousuo {
width: 92%;
height: 100rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
}
.shurukuang {
width: 80%;
height: 64rpx;
border-radius: 32rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f6f6f6;
}
.shurukuang input {
width: 90%;
height: 100%;
font-size: 32rpx;
}
.sousuo_anniu {
width: 20%;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
}
.sousuo_anniu text {
font-size: 30rpx;
}JavaScript代码段
const db = wx.cloud.database()
Page({
data: {
search: ''
},
onLoad: function (options) {
},
GetSearchInput: function(e) {
this.setData({
search: e.detail.value
})
},
ToSearch: function(e) {
if(this.data.search == '') {
wx.showToast({
title: '请输入',
icon: 'none'
})
return
}
db.collection('输入你查询的表名').where({
name: this.data.search
}).get().then(res => {
if(res.data.length != 0) {
this.setData({
shangpinbiao: res.data
})
}else {
wx.showToast({
title: '未找到商品',
icon: 'none'
})
}
})
},
})模糊搜索功能实现
WXML代码段和WXSS代码段跟简单搜索的一样，JavaScript代码段如下
Javascript代码段
const db = wx.cloud.database()
Page({
data: {
search: ''
},
onLoad: function (options) {
},
GetSearchInput: function (e) {
this.setData({
search: e.detail.value
})
},
ToSearch: function (e) {
if (this.data.search == '') {
wx.showToast({
title: '请输入',
icon: 'none'
})
return
}
db.collection('输入你查询的表名').where({
name: db.RegExp({
regexp: this.data.search,
options: 'i',
}),
}).get().then(res => {
if (res.data.length != 0) {
this.setData({
shangpinbiao: res.data
})
} else {
wx.showToast({
title: '未找到',
icon: 'none'
})
}
})
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览，实现思路有两种，具体实现方法和实例代码大家参考下本文2017-07-07
js HTML DOM EventListener功能与用法实例分析
这篇文章主要介绍了js HTML DOM EventListener功能与用法,结合实例形式分析了js HTML DOM EventListener事件监听相关用法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JavaScript基于面向对象之创建对象，对创建对象进行了详细描述，感兴趣的小伙伴们可以参考一下2015-12-12
PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能。这篇文章主要带大家学习一下PixiJS是如何实现文字绘制的，希望对大家有所帮助2023-02-02
这篇文章主要介绍了简单谈谈javascript中的变量、作用域和内存问题的相关资料,需要的朋友可以参考下2015-08-08
javascrpit的基本概念分析，刚开始学习js的朋友可以参考下。2011-06-06
这篇文章主要介绍了微信小程序云函数添加数据到数据库的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
折叠导航的实现方法有很多，在文本为大家介绍下如何使用js实现的折叠导航，感兴趣的朋友可以参考下2013-11-11
这篇文章主要介绍了js使用cookie实现记住用户名功能,涉及javascript操作cookie读写及删除实现用户名的保存功能,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了将中国标准时间转换成标准格式的方法,需要的朋友可以参考下2014-03-03
最新评论