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

最新推荐文章于 2024-07-17 10:06:05 发布

a_靖

最新推荐文章于 2024-07-17 10:06:05 发布

阅读量6.8k

点赞数 2

分类专栏：微信小程序 Web前端云开发文章标签：云开发云开发搜索云开始实现搜索功能小程序云搜索功能实现搜索

本文链接：https://blog.csdn.net/qq_35713752/article/details/106114947

版权

Web前端同时被 3 个专栏收录

404 篇文章 25 订阅

订阅专栏

微信小程序

304 篇文章 53 订阅

订阅专栏

云开发

28 篇文章 6 订阅

订阅专栏

云开发数据库的模糊搜索，根据记录的字段字符串模糊搜索实现。

代码：

先在app.js初始化：

//app.js
App({
  onLaunch: function () {
    wx.cloud.init({
      env:'school-5k17122'
    })
  },
  globalData: {
    userInfo: null
  }
})

然后搜索的wxml

  <view class='page_row' bindtap="suo">
  	<view class="search">
  		<view class="df search_arr">
  			<icon class="searchcion" size='20' type='search'></icon>
  			<input class="" bindinput="input_p" placeholder="请输入关键字" value="{{searchValue}}" />
  		</view>
  	</view>
  	<view class='sousuo' catchtap="see">搜索</view>
  </view>

  <block wx:if='{{obj}}' wx:for='{{obj}}' wx:key=''>
  	<view class="title">成都信息工程大学</view>
  	<view class="item">名字：{{item.name}}</view>
  	<view class="item">位置：{{item.place}}</view>
  	<view class="item">类型：{{item.type}}</view>
  </block>

然后在搜索页面的Js实现

// pages/search/search.js
var text=''

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  see(){

    var that=this
    // 田径
    const db = wx.cloud.database()
    const school = db.collection('school')
    school.where({
      type: {
        $regex: '.*' + text + '.*',
        $options: '1'
      }
    }).get({
      success: res => {
        console.log('匹配', res)
        if (res.data.length == 0) {
          wx.showModal({
            title: '提示',
            content: '暂时没找到对应答案',
            showCancel: false,
            success: function (res) { }
          })
          return;
        }else{
          that.setData({
            obj: res.data
          })
        }
      }
    })
  },

  input_p(e){
    text = e.detail.value
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('--------------1111')
    // const db = wx.cloud.database()
    // const school = db.collection('school')
    // school.add({
    //   // data 字段表示需新增的 JSON 数据
    //   data: {
    //     name: '食堂厕所',
    //     place: '一二食堂一楼',
    //     type: '厕所'
    //   },
    //   success: function (res) {
    //     // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
    //     console.log('--------------',res)
    //   }
    // })

  },
})

样式：

.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;
  border-bottom: 1px solid #d0d0d0;
}
.item{
  margin: 40rpx;
  line-height: 100rpx;
  height: 100rpx;
  
}
.searchcion {
  margin: 10rpx 10rpx 10rpx 10rpx;
  position: absolute;
  left:25rpx;
  z-index: 2;
  width: 20px;
  height: 20px;
  text-align: center;
}
.title{
  margin-top: 100rpx;
  margin-left: 30rpx;
}

完成