- 我们先来看看小程序的官方文档
现附上小程序官网链接https://developers.weixin.qq.com/miniprogram/dev/index.html
在搜索框中输入input(点击即可查看哟)
你会发现很长很长的说明，对于很多初学者来说根本无从下手，咳咳，其实我也是小白，只是最近在负责一些小项目，也踩了一些坑，在这里和大家分享一下，哈哈哈哈哈.上图
首先我们得有一个思路，在搜索框输入关键词，点击搜索按钮，进行搜索，当我们点击搜索时，会向服务器请求数据，那么，我们的思路是，我们输入的关键词与数据库数据进行匹配，如果有，则被调用出来
我们先把搜索框的基本样式给实现了，我们先建一个
search.wxml
<!-- 搜索框 --> <view class='search'> <input type='text' placeholder='输入你想要的内容' confirm-type='search' value="{{inputValue}}" bindinput='inputBind' bindconfirm='query'></input> <image class="" src='/picture/search.png' bindtap='query'></image> </view>然后建一个
search.wxss
/* 搜索框样式 */.search{ display: flex; flex-direction: row; justify-content:space-between; align-items: center; width:70%; height:60rpx; background-color:whitesmoke; margin-top: 5%; border:1rpx solid whitesmoke; border-radius: 5rpx;}/* 搜索框提示文字样式 */.search input{ font-size:27rpx; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding-left:30rpx; }/* 搜索框小图标 */.search image{ width:40rpx; height:40rpx; padding-right:20rpx;}最后建一个
search.js
page({/*** 页面的初始数据*/data:{ inputValue: '', //搜索的内容}, //搜索框文本内容显示 inputBind: function(event) { this.setData({ inputValue: event.detail.value }) console.log('bindInput' + this.data.inputValue) }, /** * 搜索执行按钮 */ query: function(event) { var that = this /** * 提问帖子搜索API * keyword string 搜索关键词 ; 这里是 this.data.inputValue * start int 分页起始值 ; 这里是 0 */ wx.request({ url: 'https://localhost/proj_online_class/server/public/index.php/forum/forum/get_issue_search/' + this.data.inputValue + /0/, data: { inputValue: this.data.inputValue }, method: 'GET', success: function(res) { console.log(res.data) var searchData = res.data that.setData({ searchData }) /** * 把 从get_issue_searchAPI * 获取 提问帖子搜索 的数据 设置缓存 */ wx.setStorage({ key: 'searchLists', data: { searchLists: res.data } }) /** * 设置 模糊搜索 */ if (!that.data.inputValue) { //没有搜索词 友情提示 wx.showToast({ title: '请重新输入', image: '../../picture/tear.png', duration: 2000, }) } else if (searchData.search.length == 0) { //搜索词不存在 友情提示 wx.showToast({ title: '关键词不存在', image: '../../picture/tear.png', duration: 2000, }) } else { //提取题目关键字 与搜索词进行匹配 var searchIndex = searchData.search.length var d = 0; for (var i = 0; i <= searchIndex - 1; i++) { var searchTitle = searchData.search[d].title console.log(searchTitle) d = d + 1; for (var x = 0; x <= searchTitle.length; x++) { for (var y = 0; y <= searchTitle.length; y++) { var keyWord = searchTitle.substring(x, y); console.log(keyWord) } } /** * 根据关键词 跳转到 search搜索页面 */ wx.navigateTo({ url: '../search/search', }) } } } }) }})
文档中说可以替换输入的内容，那么我们来试一试，实践出珍珠嘛，哈哈哈，我们给它绑定一个事件，如图
把inputValue的值注册到date里面，如图
然后在把inputValue值给绑定在search.wxml，如图
注意，数据绑定得用“{{ }}”哟·，这一点是不是很Vue很像，哈哈哈，我也是刚学Vue
把内容输入进去后，是不是要点击搜索呀，我们很自然就想到需要一个按钮，我们把 bindconfirm=”query” 但它不是一个按钮，我之前老是点它没反应，哈哈哈，那它是干什么的呢，如图
原来它是点击完成时触发输入到搜索框的，soga，然后捏，然后就没有然后了，哈哈哈哈，不存在的，我们现在还缺一个按钮呀，我们就给它一个按钮用来点击搜索，我又想实现点击触发，我们该咋办捏，嘻嘻，可以通过中介，嘻嘻嘻，我们绑定一个按钮，如图
这个中介就是“query”啦，当我们点击时也可以触发bindconfirm啦这里，当然这里绑定按钮还可以选择catchtap=”query”，bindtap和catchtap有什么区别，前者是冒泡，后者是非冒泡，至于什么是冒泡和非冒泡，哈哈，我就不在这累述啦，感觉我好啰嗦，啊哈哈
当然，bindtap=”query”,点击，肯定得向服务器请求呀，所以在search.js中有
wx.request({})即向服务器请求的函数呐，把你的API写在url上，把你的搜索关键字写在data上，然后就万事大吉啦
可能这里写得比较绕，如图
首先说明，我也是个小白，所以写得并不好，我相信肯定有比这更好的写法，这段代码的意思是，把title给遍历一遍，然后与搜索词匹配
至于search是什么，是我填写在API的返回值呐，如图
好了，关于小程序的搜索大概就讲这么多啦
