云函数实现模糊搜索功能

云函数实现模糊搜索功能

核心代码

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
    
    env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
    
    return db.collection('zhusir_video').where({
    
        name:db.RegExp({
    
            regexp:event.name,
            options:'i'
        })
    }).get()
}

先看一下html部分

 <!-- 搜索框 -->
    <view class="flex">
        <van-search shape="round" value="{
    {keywords}}" clearable="{
    {false}}" placeholder="{
    {value}}" custom-class="search" input-class="input" show-action  action-text="取消" bind:search="onSearch" bind:change="inputChange" bind:cancel="onCancel" bind:focus="onFocus" bind:blur="onBlur" />
    </view>

再看一下js部分

// pages/search/index.js
Page({
    

    /** * 页面的初始数据 */
    data: {
    
        searchHistory: [],
        movies: [],
        value: '请输入片名',
        show: false,
        keywords: ''
    },

    /** * 生命周期函数--监听页面加载 */
    onLoad(options) {
    
        this.setData({
    
            searchHistory: wx.getStorageSync('searchHistory') || []
        })
    },

    /** * 生命周期函数--监听页面初次渲染完成 */
    onReady() {
    

    },
    goDetail(e) {
    
        wx.navigateTo({
    
            url: '../detail/detail?id=' + e.currentTarget.dataset.id,
        })
    },
    onFocus() {
    
        this.setData({
    
            show: true
        })
    },
    // onBlur() {
    
    // this.setData({
    
    // show: false
    // })
    // },
    clearHistory() {
    
        this.setData({
    
            searchHistory: []
        })
        wx.removeStorageSync('searchHistory')
    },
    inputChange(e) {
    
        let value = e.detail
        if (!value) {
    
            this.setData({
    
                movies: []
            })
            return false
        }
        this.loadData(value)
    },
    tapSearch(e) {
    
        const query = e.currentTarget.dataset.name
        this.setData({
    
            movies: []
        })
        this.searchMovie(query)
    },
    loadData(value) {
    
        wx.cloud.callFunction({
    
                name: 'searchMovie',
                data: {
    
                    name: value
                }
            })
            .then(res => {
    
                this.setData({
    
                    movies: res.result.data
                })
            })
    },
    searchMovie(query) {
    
        let history = this.data.searchHistory
        this.setData({
    
            value: query,
            keywords: '',
            show:false
        })
        if (query.length > 0 && query.trim().length != 0) {
    
            if (!history.some(item => item === query)) {
    
                let hist = [query].concat(history).slice(0, 10)
                this.setData({
    
                    searchHistory: hist
                })
                wx.setStorageSync('searchHistory', hist)
            }
            this.loadData(query)
        }
    },
    onSearch(e) {
    
        const query = e.detail
        this.setData({
    
            movies: [],
            value: query
        })
        if (!query) {
    
            wx.showToast({
    
                title: '请输入搜索内容',
                icon: 'none'
            })
            this.setData({
    
                value: '请输入片名'
            })
            return false
        }
        this.searchMovie(query)
    },
    onCancel() {
    
        if (this.data.show) {
    
            this.setData({
    
                show: false
            })
            return false
        }
        if (this.data.movies) {
    
            this.setData({
    
                movies: [],
                value:'请输入片名'
            })
            return false
        }
        wx.switchTab({
    
            url: '../home/index',
        })
    },
    /** * 生命周期函数--监听页面显示 */
    onShow() {
    

    },

    /** * 生命周期函数--监听页面隐藏 */
    onHide() {
    

    },

    /** * 生命周期函数--监听页面卸载 */
    onUnload() {
    

    },

    /** * 页面相关事件处理函数--监听用户下拉动作 */
    onPullDownRefresh() {
    

    },

    /** * 页面上拉触底事件的处理函数 */
    onReachBottom() {
    

    },

    /** * 用户点击右上角分享 */
    onShareAppMessage() {
    

    }
})