Getting started with applet cloud development - getting user search content

1. Let's make a nice search box first （ I'm whoring for nothing here ）

Detailed see ：(4 Bar message ) The small program cloud development realizes the search function _a_ Jing's blog -CSDN Blog _ Wechat applet cloud development search function

wxml Remember to define the page to get the user input data getKey（） Methods and Click event of search button goSearch（）

<view class='page_row'>
    <view class="search">
      <view class="df search_arr">
        <icon class="searchcion" size='20' type='search'></icon>
        <input placeholder=" Please enter keywords " bindinput="getKey"></input>
      </view>
    </view>
    <view class='sousuo' bindtap="goSearch"> Search for </view>
  </view>

Some corresponding styles ：

.search{
    width: 80%;
  }
  .search_arr {
    border: 1px solid #d0d0d0;
    border-radius: 10rpx;
    margin-left: 20rpx;
  }
  .search_arr input{
    margin-left: 60rpx;
    height: 60rpx;
    border-radius: 5px;
  }
  .bc_text {
    line-height: 68rpx;
    height: 68rpx;
    margin-top: 34rpx;
  }
   
  .sousuo {
    margin-left: 15rpx;
    width: 15%;
    line-height: 150%;
    text-align: center;
    border: 1px solid #d0d0d0;
    border-radius: 10rpx;
  }
  .page_row{
    display: flex;
    flex-direction: row
  }
  .searchcion {
    margin: 10rpx 10rpx 10rpx 10rpx;
    position: absolute;
    left:25rpx;
    z-index: 2;
    width: 20px;
    height: 20px;
    text-align: center;
  }

 

2. To write getKey（） and goSearch（） Method , Minute input is empty 、 If it is not empty

Page({
    data:{
        key:null
    },
    getKey(e){
        //console.log(e.detail.value)  Get the data from the keyboard 
        this.setData({
            key:e.detail.value
        })
    },
    goSearch(){
        console.log(this.data.key)
        if(this.data.key){
            console.log(' You can perform a search ')
        }else{
            // The search content is empty 
            wx.showToast({
                icon:'error',
                title:' Please enter the search content '
            })
        }
    }
})

 3. Match the search fields to the database , Follow the multi field fuzzy search in the previous section

let db = wx.cloud.database()
let _ = db.command
Page({
    data:{
        key:null
    },
    getKey(e){
        //console.log(e.detail.value)  Get the data from the keyboard 
        this.setData({
            key:e.detail.value
        })
    },
    goSearch() {
        console.log(this.data.key)
        if (this.data.key) {
            console.log(' You can perform a search ')
            let key=this.data.key
            db.collection('news')
                .where(_.or([{ // title 
                        title: db.RegExp({ // Use regular queries , Realize the fuzzy query of search 
                            regexp: key, // The words to search 
                            options: 'i', // Case insensitive 
                        }),
                    },
                    { // describe 
                        desc: db.RegExp({
                            regexp:key,
                            options: 'i',
                        }),
                    },
                    { // Content 
                        content: db.RegExp({
                            regexp: key,
                            options: 'i',
                        }),
                    }
                ])).get()
                .then(res => {
                    console.log(' Search successful ', res)
                    this.setData({
                        list: res.data
                    })
                })
                .catch(res => {
                    console.log(' Search failed ', res)
                })
        } else {
            // The search content is empty 
            wx.showToast({
                icon: 'error',
                title: ' Please enter the search content '
            })
        }
    }
})

4.wxml New search results interface and style

<view wx:if="{
   {list&&list.length>0}}">
 The search results are as follows ：
  <view wx:for="{
   {list}}" wx:key='index'>
    <view class="item">
    <view> title ：{
   {item.title}}</view>
    <view> describe ：{
   {item.desc}}</view>
    <view> Content ：{
   {item.content}}</view>
    </view>
  </view>
</view>

<view wx:if="{
   {list&&list.length==0}}">
 The search content is empty 
</view>

  .item{
    margin: 20rpx;
    border-bottom: 1px solid gainsboro;
    color: gray;
  }

5. Realization effect ：