脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序搜索功能

微信小程序云开发实现搜索功能

 更新时间：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'
                })
            }
        })
    },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • ES6中Class类的静态方法实例小结

    ES6中Class类的静态方法实例小结

    这篇文章主要介绍了ES6中Class类的静态方法,结合实例形式简单总结分析了ES6中class类中静态方法的使用方法与相关注意事项,需要的朋友可以参考下
    2017-10-10
  • Javascript 读后台cookie代码

    Javascript 读后台cookie代码

    由于asp的cookie是经过url编码的，所以读之前要unescape一下。
    2008-09-09
  • 使用JS实现气泡跟随鼠标移动的动画效果

    使用JS实现气泡跟随鼠标移动的动画效果

    气泡跟随鼠标移动，并在每次点击时产生不同的变化，效果非常迷人，下面小编给大家带来了，基于js实现的气泡效果实例代码，需要的朋友参考下吧
    2017-09-09
  • JavaScript 数组循环引起的思考

    JavaScript 数组循环引起的思考

    Google array.js 程序中建议改进的代码。思考为什么i-- 到了 i为0时while循环结束了？
    2010-01-01
  • 详解网站中图片日常使用以及优化手法

    详解网站中图片日常使用以及优化手法

    一直都觉得网站优化的重点是图片，图片的使用也是博大精深。本文将总结一下图片的日常使用以及优化手法，下面跟着小编一起来看下吧
    2017-01-01
  • js和canvas绘制圆形金属质感特效

    js和canvas绘制圆形金属质感特效

    在JavaScript中,可以使用HTML5提供的Canvas元素来进行绘图操作,要使用canvas元素,浏览器必须支持html5,Canvas是一个HTML元素,可以通过JavaScript来操作和绘制图形,本文示例实现js和canvas绘制圆形金属质感的诗词高级排版特效
    2024-09-09
  • JS验证字符串功能

    JS验证字符串功能

    这篇文章主要介绍了JS验证字符串功能实例代码,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • OfflineSave离线保存代码再次发布使用说明

    OfflineSave离线保存代码再次发布使用说明

    OfflineSave离线保存代码再次发布使用说明...
    2007-05-05
  • JavaScript深入介绍WebAPI的用法

    JavaScript深入介绍WebAPI的用法

    JS分成三个大的部分：ECMAScript、DOM API、BOM API，其中：ECMAScript是让前端开发建立基本的编程思维。但是要想真正来写一个更加复杂的有交互式的页面,还需要WebAPI的支持，相当于把后端编程实现成前端交互。DOM+BOM就组成了WebAPI
    2022-06-06
  • 微信公众平台开发教程（五）详解自定义菜单

    微信公众平台开发教程（五）详解自定义菜单

    这篇文章主要介绍了微信公众平台开发教程（五）详解自定义菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-12-12

最新评论