微信小程序开发实现搜索功能

对于搜索都是会有一些需要的，所以搜索页面还是可以复用的。主页面就是下面这样：

 

这个页面在pages/components/component2/component2.wxml

点击页面中 黄色的input就可以跳转到真正的搜索页面：pages/components/component2/search/search.wxml

搜索页面中也是有个input搜索框，旁边有个小叉号，可以清除input里的文字。

下面主要讲下search页面的逻辑:其实也非常简单。

搜索input绑定bindInput函数，

bindInput:function(e){  

this.setData({  
       inputValue:e.detail.value  
     })  
     console.log(\'bindInput\'+this.data.inputValue)  
  }, 

将输入的值存在inputValue中，搜索button 用bindtap绑定setSearchStorage函数

setSearchStorage:function(){  
    let data;  
    let localStorageValue = [];  
    if(this.data.inputValue != \'\'){  
      //调用API从本地缓存中获取数据  
      var searchData = wx.getStorageSync(\'searchData\') || []  
      searchData.push(this.data.inputValue)  
      wx.setStorageSync(\'searchData\', searchData)  
      wx.navigateTo({  
          url: \'../result/result\'  
      })  
    }else{  
      console.log(\'空白的你搜个蛋！\')  
    }  
    // this.onLoad();  
  },  

这个函数主要就是先判断输入的值是否不为空，再通过getStorageSync获取到key为searchData的localStorage，

如果第一次还没有set过这个key就获取[]，再将用户inputValue存的想要搜索的值放进searchData，之后再跳转到result页面。这里我只放了个案例页面。

如果在真正的生产环境中，这个函数可以通过wx.request向服务器发送请求，再把数据放进result页面中，实现真正的搜索功能。

 

删除inputValue的button功能实现也很简单，setData将inputValue设置为空字符串就可以了。

放点击result页面左上角的返回时，你就可以发现，你刚才搜索的结果已经放到了search的页面中。

当你想要删除缓存数据的时候，可以点击清空浏览记录按钮，会弹出个对话框：

点击确认删除之后，会自动刷新页面（重定向到本页面），将之前的key为searchData的localStorage重置为空数组。

 

modalChangeConfirm:function(){ 

wx.setStorageSync(\'searchData\',[]) 

this.setData({ 

modalHidden:true 

}) 

wx.redirectTo({ 

url: \'../search/search\' 

}) 

}, 

该资讯来源于小程序资讯，更多开发教程请关注小程序开发教程

这里的清除不是应用wx.clearStorage()删除的，以为clearStorage会将所有的localStorage都删掉，慎用！这样，搜索的功能就做好了！

 

一:搜索框功能实现

1.在首页做一个搜索框的样式并实现跳转到搜索页面

 

[html] view plain copy

1. <view class='page_row' bindtap="suo">  
2.   <view class="search">  
3.     <view class="df search_arr">  
4.       <icon class="searchcion" size='20' type='search'></icon>  
5.       <input class="" disabled placeholder="请输入关键字" value="{{searchValue}}"/>  
6.     </view>  
7.   </view>  
8.   <view class='sousuo'>搜索</view>  
9. </view>  

 

[css] view plain copy

1. .search{  
2.   width: 80%;  
3. }  
4. .search_arr {  
5.   border: 1px solid #d0d0d0;  
6.   border-radius: 10rpx;  
7.   margin-left: 20rpx;  
8. }  
9. .search_arr input{  
10.   margin-left: 60rpx;  
11.   height: 60rpx;  
12.   border-radius: 5px;  
13. }  
14. .bc_text {  
15.   line-height: 68rpx;  
16.   height: 68rpx;  
17.   margin-top: 34rpx;  
18. }  
19.   
20. .sousuo {  
21.   margin-left: 15rpx;  
22.   width: 15%;  
23.   line-height: 150%;  
24.   text-align: center;  
25.   border: 1px solid #d0d0d0;  
26.   border-radius: 10rpx;  
27. }  
28. .page_row{  
29.   display: flex;  
30.   flex-direction: row  
31. }  
32. .searchcion {  
33.   margin: 10rpx 10rpx 10rpx 10rpx;  
34.   position: absolute;  
35.   left:25rpx;  
36.   z-index: 2;  
37.   width: 20px;  
38.   height: 20px;  
39.   text-align: center;  
40. }  

js.点击跳转到搜索的页面

 

 

 

 

[javascript] view plain copy

1. suo: function (e) {  
2.   wx.navigateTo({  
3.     url: '../search/search',  
4.   })  
5. },  

2.搜索页面实现搜索功能

 

 

[html] view plain copy

1. <!--pages/search/search.wxml-->  
2. <view class="search page_row">  
3.   <input class="df_1" placeholder="请输入你有搜索的内容" value="{{searchValue}}" bindinput="searchValueInput" />  
4.   <button bindtap="suo" data-id='1'>  
5.     媒婆  
6.   </button>  
7.   <button bindtap="suo" data-id='2'>  
8.     单身  
9.   </button>  
10. </view>  
11. <view class="search_no" wx:if="{{!centent_Show}}">  
12.   <text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text>  
13. </view>  
14. <import src="../index/card/card.wxml" />  
15. <template is="nanshen_card" data="{{nanshen_card,img}}" />  

 

[javascript] view plain copy

1.   

[javascript] view plain copy

1. var app = getApp();  
2. var searchValue =''  
3. // pages/search/search.js  
4. Page({  
5.   data: {  
6.     centent_Show: true,  
7.     searchValue: '',  
8.     img: '',  
9.     nanshen_card:''  
10.   },  
11.   onLoad: function () {  
12.   },  
13.   searchValueInput: function (e) {  
14.     var value = e.detail.value;  
15.     this.setData({  
16.       searchValue: value,  
17.     });  
18.     if (!value && this.data.productData.length == 0) {  
19.       this.setData({  
20.         centent_Show: false,  
21.       });  
22.     }  
23.   },  
24.   suo:function(e){  
25.     var id= e.currentTarget.dataset.id  
26.     var program_id = app.program_id;  
27.     var that = this;  
28.     wx.request({  
29.       url: 'aaa.php',//这里填写后台给你的搜索接口  
30.       method: 'post',  
31.       data: { str: that.data.searchValue, program_id: program_id, style:id },  
32.       header: {  
33.         'content-type': 'application/x-www-form-urlencoded'  
34.       },  
35.       success: function (res) {  
36.         if(res.data.length ==0){  
37.           that.setData({  
38.             centent_Show: false,  
39.           });  
40.         }  
41.         that.setData({  
42.           nanshen_card: res.data,  
43.         });  
44.       },  
45.       fail: function (e) {  
46.         wx.showToast({  
47.           title: '网络异常！',  
48.           duration: 2000  
49.         });  
50.       },  
51.     });  
52.   }  
53. });  

 

 

 

 

 

[css] view plain copy

1. /* pages/search/search.wxss */  
2. @import "../index/card/card";  
3. .searchcion{  
4.     width: 24px;  
5.     height: 24px;  
6.     text-align: center;  
7.     margin-top: 5rpx  
8. }  
9. .search{  
10.     padding: 1% 3%;  
11.     background: #D0D0D0;  
12. }  
13. .search input{  
14.     width: 85%;  
15.     border-radius: 5px;  
16.     background: #fff;  
17.     border: none;  
18.     font-size: 12px;  
19.     padding:1% 2.5%;  
20.     margin-right: 5px;  
21.     }  
22. .search button{  
23.     line-height:30px;  
24.   
25.     text-align: center;  
26.     border: none;  
27.     font-size: 28rpx;  
28.     background: white  
29. }  
30.