微信小程序实现搜索功能

阅读说明

采用了组件的技术点来整理代码
使用到了数据库操作
使用到了 input 标签
书写了 loading 加载中等操作
涉及到了组件的传值
仅供参考

search 页面书写请求界面

<view><view class="select"><input type="text" placeholder="{{subtitle}}" value="{{search}}" bindchange="handlerSearch" /></view><!--用于展示 搜索到的信息的组件--><view class="list"><product wx:for="{{list}}" wx:key="id" item="{{item}}" /></view>
</view>

采用 js 里面的数据，动态的数据，效果是能够设置 value 显示的值（更好的体验）
bindchange 作用是失去光标以后执行操作
collectionName 是传递过去的值

search 页面书写 js 代码

书写初始数据

  data: {search:null,                  // value 的值subtitle:"请输入查询内容...",  //提示内容list:[],                      },

书写事件函数进行请求（代码是连续的，只是为了更好地介绍就分开了）

 handlerSearch(e){if(!e.detail.value.trim()){   //查看内容是否为空this.setData({list:[],search:null,})return; //阻止后续代码}

    this.setData({list:[],//每次搜索内容的时候，需要清空，（因为如果不清空的话可能会数据叠加）search:e.detail.value   //e.detail.value input 传来的数据})this.loadList()  //执行下一步},

  //加载数据async loadList(){let res = await ceshi({      //调用请求数据的接口collectionName:"collect",  //请求的集合的名字data:{search:this.data.search  //查询的条件}})this.setData({list:res.data   //请求成功返回的参数})},

附件（查询代码）

let db = wx.cloud.database()
export default ({collectionName，data
})=>{return new Promise((resolve,reject)=>{let where = {}let title = {$regex:'.*'+data.search, //包含data.search就可以$options:"i"       //忽略大小写匹配}where = data.search ? {...where,title} : where //根据data.search关键字查询，如果包含此关键字，则返回对应数据selectData(){db.collection(collectionName).where(where).get({success(res){resolve(res)},fail(err){reject(err)},}) },
}

展示内容的组件

//注册组件  在 app.json 里面"usingComponents": {"product": "/components/product/product",},

//接收参数 本页面 js 文件中properties: {item:{ //接受外部传入的item属性type:Object},},

<view class="item"><block wx:for="{{item.directors}}" wx:key="id">{{item.name}} </block> <!--循环遍历数据-->
</view>

end

微信小程序实现搜索功能相关推荐

微信小程序添加搜索功能
小程序添加搜索功能
微信小程序—实现搜索功能，搜索历史记录功能
本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能. 不详细介绍,主看代码注释即可!! 1.搜索组件页面代码块 <template><view><!- ...
微信小程序实现搜索功能以及效果(超详细)
我们先来看一下实现哪些功能: 1 搜索历史记录以及清空历史记录 2 热门搜索推荐以及更新推荐内容 3 根据输入框输入的内容来自动搜索相关查询,后台逻辑是模糊查询,后台就先不扯了这里我用的是自己定义的 ...
微信小程序热门搜索功能实现
微信小程序点击搜索按钮,弹出遮罩层,显示热门搜索和搜索功能界面搜索框遮罩,图层 input 热门搜索页面元素自动换行效果点击搜索框,弹出第二个视图层,显示input搜索框,并自动弹出键盘. ...
基于微信云开发的微信小程序之搜索功能的实现
文章目录搜索功能的设计代码逻辑页面设计效果展示搜索功能的设计功能描述: 该模块主要是基于云开发实现小程序搜的搜索功能.如果搜索框输入为空或直接点击搜索按钮,显示对应弹窗:如果搜索框输入内容 ...
微信小程序--历史搜索功能的实现
最近公司在做一个内部的管理系统,是基于微信小程序的,我看了一下和Vue比较类似,布局方面有HTML和CSS基础的人都可以做,还是比较容易上手的,现在先记录一下搜索框保留搜索历史的功能的实现. ##wx ...
微信小程序searchbar搜索功能的使用
组件下载下载后将文件放入小程序内 page/index/index.json中: {"usingComponents": {"mp-searchbar": & ...
全栈项目|小书架|微信小程序-实现搜索功能
效果图上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...
微信小程序实现搜索功能(搜索历史, 清空历史, 搜索发现等操作)
先看看效果图比较简单,不做过多的解释了,直接看代码: html  <!-- 自定 ...
微信小程序联想搜索功能的实现
联想搜索功能的实现 wxml wxss js 效果 form使用 form | 微信开放文档表单组件,当点击 <form> 表单中 form-type 为 submit 的 <bu ...

微信小程序实现搜索功能

微信小程序实现搜索功能相关推荐

最新文章

热门文章

微信小程序 实现搜索功能

微信小程序 实现搜索功能相关推荐

最新文章

热门文章

微信小程序实现搜索功能

微信小程序实现搜索功能相关推荐