微信小程序云开发模糊搜索功能的实现
2020-05-16 18:02
106 查看
这是效果图:
话不多说,上代码,js、wxml采用的是weui里的模板
js:
Page({ /** * 页面的初始数据 */ data: { inputVal: '', inputShowed: false, search_list1: [], }, showInput: function () { this.setData({ inputShowed: true }); }, hideInput: function () { this.setData({ inputVal: "", inputShowed: false }); }, clearInput: function () { this.setData({ inputVal: "" }); }, inputTyping: function (e) { this.setData({ inputVal: e.detail.value }); //连接数据库 const db = wx.cloud.database() var that = this db.collection('book').where({ //使用正则查询,实现对搜索的模糊查询 name: db.RegExp({ regexp: e.detail.value, //从搜索栏中获取的value作为规则进行匹配。 options: 'i', //大小写不区分 }), }).limit(10).get({ success: res => { console.log(res) that.setData({ search_list1: res.data }) } }) } })
wxml:
<view class="page"> <view class="page__bd"> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" /> <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput"> <icon type="clear" size="14"></icon> </view> </view> <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"> <icon class="weui-icon-search" type="search" size="14"></icon> <view class="weui-search-bar__text">搜索</view> </label> </view> <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view> </view> <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}" wx:for="{{search_list1}}"> <navigator url="./book?whatbook={{item.sx}}" class="weui-cell" hover-class="weui-cell_active"> <view class="weui-cell__bd"> <view>书本名:{{item.name}}</view> </view> </navigator> </view> </view> </view>
相关文章推荐
- 【微信小程序】云开发模糊查找功能实现
- 微信小程序_实现输入框带搜索记录功能
- 我要点爆”微信小程序云开发之项目建立与我的页面功能实现
- 微信小程序利用云开发实现聊天室功能
- 微信小程序搜索分页功能实现
- 微信小程序开发实现的IP地址查询功能示例
- 通过微信小程序的云开发实现留言功能
- 微信小程序分组开发与左滑功能实现
- 微信小程序开发之radio实现显示和隐藏功能 原创 2017年07月04日 20:33:07 标签: 前端开发 / 微信 我们在开发微信小程序的时候,经常会用到显示和隐藏,
- 微信小程序之"搜索历史"功能实现
- 微信小程序开发日志2018-03-04: 实现图书管理小程序基本功能
- 基于java的微信小程序的实现(九)用户留言功能相关后端接口开发
- 基于java的微信小程序的实现(八)用户点赞/取消点赞功能相关后端接口开发
- [微信小程序]搜索功能实现,搜索框样式
- 微信小程序开发详解---小知识,大功能【实现按钮的随着手指移动】
- 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
- 微信小程序 开发之快递查询功能的实现
- 微信小程序开发——实现天气预报小功能
- 微信小程序开发——云开发如何实现模糊查询
- 微信小程序首页的分类功能和搜索功能的实现思路及代码详解