云函数实现模糊搜索功能

云函数实现模糊搜索功能

核心代码

// 云函数入口文件
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() {

    }
})