我们先来看看小程序的官方文档

1.现附上小程序官网链接https://developers.weixin.qq.com/miniprogram/dev/index.html在搜索框中输入input(点击即可查看哟)你会发现很长很长的说明，对于很多初学者来说根本无从下手，咳咳，其实我也是小白，只是最近在负责一些小项目，也踩了一些坑，在这里和大家分享一下，哈哈哈哈哈.

上图首先我们得有一个思路，在搜索框输入关键词，点击搜索按钮，进行搜索，当我们点击搜索时，会向服务器请求数据，那么，我们的思路是，我们输入的关键词与数据库数据进行匹配，如果有，则被调用出来我们先把搜索框的基本样式给实现了，我们先建一个search.wxml!--搜索框--viewclass='search'inputtype='text'placeholder='输入你想要的内容'confirm-type='search'value="{{inputValue}}"bindinput='inputBind'bindconfirm='query'/inputimageclass=""src='/picture/search.png'bindtap='query'/image/view

2.然后建一个

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:1rpxsolidwhitesmoke;border-radius:5rpx;}/*搜索框提示文字样式*/.searchinput{font-size:27rpx;font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;padding-left:30rpx;}/*搜索框小图标*/.searchimage{width:40rpx;height:40rpx;padding-right:20rpx;}

3.最后建一个

search.jspage({/***页面的初始数据*/data:{inputValue:'',//搜索的内容},//搜索框文本内容显示inputBind:function(event){this.setData({inputValue:event.detail.value})console.log('bindInput'+this.data.inputValue)},/***搜索执行按钮*/query:function(event){varthat=this/***提问帖子搜索API*keywordstring搜索关键词;这里是this.data.inputValue*startint分页起始值;这里是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)varsearchData=res.datathat.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,})}elseif(searchData.search.length==0){//搜索词不存在友情提示wx.showToast({title:'关键词不存在',image:'../../picture/tear.png',duration:2000,})}else{//提取题目关键字与搜索词进行匹配varsearchIndex=searchData.search.lengthvard=0;for(vari=0;i=searchIndex-1;i++){varsearchTitle=searchData.search[d].titleconsole.log(searchTitle)d=d+1;for(varx=0;x=searchTitle.length;x++){for(vary=0;y=searchTitle.length;y++){varkeyWord=searchTitle.substring(x,y);console.log(keyWord)}}/***根据关键词跳转到search搜索页面*/wx.navigateTo({url:'../search/search',})}}}})}})

4.文档中说可以替换输入的内容，那么我们来试一试，实践出珍珠嘛，哈哈哈，我们给它绑定一个事件，如图把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的返回值呐，如图好了，关于小程序的搜索大概就讲这么多啦