筛选功能，输入框输入关键字，筛选符合商品 |微信小程序云开发

功能展示：

代码展示：
wxml文件

<view class="banner">
    <image src="../../images/5cff6f9da2f6c.png"></image> </view> <view class="search">
    <input class="weui-input" auto-focus placeholder="搜索" value="{{value}}" bindinput="seachtype" bindtap="yhdj" style="width: {{qxshow==1?'80%':'90%'}};" confirm-type="search" />
    <view class="ipputqx" bindtap="qx" wx:if="{{qxshow==1}}">取消</view> </view> <view class="tslb" wx:if="{{tushuData[0]}}">
    <view class="tslb_main" wx:for="{{tushuData}}" bindtap="tsxq" wx:key="{{index}}" id="{{item._id}}">
        <view class="tslb_left">
            <image src="{{item.phone}}"></image>
        </view>
        <view class="tslb_right">
            <view class="tslb_right_title">{{item.name}}</view>
            <view class="tslb_right_zz">作者：{{item.auth}}</view>
            <view class="tslb_right_zz">出版社：{{item.cbs}}</view>
            <view class="tslb_right_zz">位置：{{item.location}}</view>
            <view class="tslb_right_an">
                <view class="tslb_right_an_main btn1">{{item.btn1}}</view>
                <view class="tslb_right_an_main btn2">{{item.btn2}}</view>
                <view class="tslb_right_an_main">{{item.btn3}}</view>
            </view>
        </view>
    </view> </view> <view class="qxkz" wx:else>
    <image src="../../images/ssjg.png"></image>
    <view class="qxkz_text">查询暂无结果</view> </view>

js代码展示

// 搜索栏，输入框input事件。
    seachtype: function (e) {
        let a = e.detail.value
        let regExp = new RegExp(a)
        // where中，变量可以直接用正则表达式比对
        db.collection("tushu").where({
            name: regExp
        }).get().then(res => {
            console.log(res.data)
            this.setData({
                tushuData: res.data
            })
        })
    },
    // 点击取消按钮、value置空，且‘取消按钮’消失。
    qx() {
        db.collection("tushu").get().then(res => {
            this.setData({
                tushuData: res.data,
                value: '',
                qxshow: 0
            })
        })
    },
    //跳转图书详情页
    tsxq(e) {
        wx.navigateTo({
            url: '../tsxq/tsxq?id=' + e.currentTarget.id,
        })
    },

核心：
onload中从云数据库中获取图书信息，动态展示
获取输入框中的关键字，转化为正则表达式，与数据库中的图书名进行比对
将获得的数据再次进行展示