微信小程序實現搜索功能（WeChat Mini program to achieve the search function）

 

最近姐姐又琢磨微信小程序了，其中需要實現小程序搜索功能，網上找了些不錯的資料，挑選了一些資料仿着實現了搜索功能，整理了代碼分享給大家。

參考資料：

https://www.runoob.com/w3cnote/javascript-table-search-filter.html

本人微信小程序主要學習教程（老師講得還是不錯的，重點后面講解了實例加深了理解，但是這些都沒有親自實踐根據需求寫上代碼來的有效）：

https://www.bilibili.com/video/BV11A411Y75o?p=1

 

微信小程序實現搜索功能我用了三個page:

 

page1 -- SearchInput 界面（注意，因為搜索界面是經常在其他界面會被調用到的，所以這里把它模塊化了，我把它放在和 pages 同層級新建的一個 components 的文件夾的子文件夾 SearchInput 下，然后用右鍵點擊 SearchInput 文件夾，選擇新建 Component 的方法來創建它，並修改以下內容）

（1）SearchInput.wxml

<view class="search_input">
    <navigator url="/pages/search/search" class="iconfont icon-search" open-type="navigate">
    <icon class="searchicon" size='20' type='search'></icon>  
    <text >搜索</text> 
    </navigator>
</view>

（2）SearchInput.wxss

.search_input {
 height: 90rpx;
 padding: 30rpx;
 background-color: #04cfff;
}
.search_input .searchicon {
 margin-right: 20rpx;
}
.search_input navigator {
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #fff;
 border-radius: 15rpx;
 color: #666;
}

 

page2 -- report界面

(1) report.wxml

<!-- bindtap是傳遞點擊事件 data-index是點擊時要傳遞的參數 -->
<view>
    <SearchInput></SearchInput>
    <view class="report_list">
        <scroll-view scroll-y>
            <view  7             class="menu_item"
 wx:for="{{reportList}}"
 wx:key="*this"
 bindtap="handleItemTap"
 data-index="{{index}}"
            >
            <view class="menu_wrap">
                <view class="menu_image">
                    <image src="../../icons/baogao.png" mode="widthFix"/>
                </view>

                <view class="menu_time">
                    <text decode="{{true}}">日期:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
 {{item}} 21                 </view>
            </view>
        </view>

        </scroll-view>
    </view>
</view>

代碼講解：通過第3行實現 SearchInput 組件的調用。這里我搜索的內容就是 scroll-view 列表顯示的標題，所以設置了一個可縱向滾動視圖區域，其中顯示的內容存儲在 reportList 中，bindtap是點擊事件所調用的函數，data-index是點擊時要傳遞的參數。

（2）report.wxss

.report_list .menu_wrap {
 display: flex;
}
.report_list .menu_wrap .menu_image {
 flex: 1;
 display: flex;
 justify-content: center;
 align-items: center;
}
.report_list .menu_wrap .menu_image image {
 width: 40%;
 margin-top: 20rpx;
 margin-bottom: 20rpx;
}
.report_list .menu_wrap .menu_time {
 flex: 3;
 display: flex;
 border-bottom: 1rpx solid #ccc;
 font-size: 32rpx;
 justify-content: center;
 align-items: center;
}

（3）report.js

Page({  2  data: {  3  reportList: [],  4     currentClickIndex: 0,  5  },  6 
  onLoad: function (options) {  8     // 1 發送異步請求獲取數據
 wx.request({ 10       url: 'http://......', 11       success: (result)=>{ 12         console.log("請求成功！！！！"); 13         var timeList = result.data; 14  console.log(timeList); 15         wx.setStorageSync("timeList", timeList); 16         this.setData({ 17  reportList: timeList 18  }); 19  }, 20       fail: (err)=>{ 21         console.log("請求失敗！！！！") 22  console.log(err); 23  }, 24  }); 25 
 }, 27 
  // 列表的點擊事件
 handleItemTap(e){ 30     // console.log(e);
    const {index} = e.currentTarget.dataset; 32     var currentClickIndex = this.data.reportList[index]; 33  wx.navigateTo({ 34       url: '/pages/drawImage/drawImage?time=' + currentClickIndex, 35  }); 36  } 37 
})

代碼講解：當一加載這個網頁，就從服務器端獲取我要的事件列表參數 timeList ，並且因為這是個經常用到的參數，也把它存到緩存中。然后設置 wxml 中循環的變量 {{ reportList }} 為獲取到的 timeList. handleItemTap是點擊事件，當點擊列表某一項的時候就跳轉頁面。

（4）report.json

{
 "usingComponents": { 3  "SearchInput":"../../components/SearchInput/SearchInput" 4   }, 5  "navigationBarTitleText": "文檔", 6  "navigationBarTextStyle": "black", 7  "navigationBarBackgroundColor": "#04cfff" 8 
}

 report界面如下：

 

page3 -- search界面

（1）search.wxml

<view class="search_row">
    <input value="{{inputValue}}" placeholder="請輸入您要搜索的商品" bindinput="handleInput"/>
    <button bindtap="handleCancel" class="button_search" hidden="{{!isFocus}}">取消</button>
</view>

<view class="search_content">
    <navigator  8     class="search_item"
 wx:for="{{showList}}"
 wx:key="index"
 url="/pages/drawImage/drawImage?time={{item}}"
    >
 {{item}} 14     </navigator>
</view>

代碼解說：serach_row 存放搜索框和按鍵，search_content 用來顯示搜索的結果。並且用 navigator 標簽，表示點擊某一行的時候則跳轉界面，這里，跳轉界面的時候我傳遞了 time 參數，而 time 的值就等於 item 。

（2）search.wxss

page {
 box-sizing: border-box;
 background-color: #fff;
 padding: 20rpx;
}
.search_row {
 height: 80rpx;
 display: flex;
}
.search_row input {
 flex: 1;
 height: 100%;
 padding-left: 30rpx;
 border-color: var(--themeColor);
 border-style: solid;
}
.search_row .button_search {
 width: 110rpx;
 height: 100%;
 padding: 0;
 margin-left: 20rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 26rpx;
 color: #fff;
 background-color: var(--themeColor);
}
.search_content {
 margin-top: 30rpx;
}
.search_content .search_item {
 background-color: #ecf0f1;
 font-size: 26rpx;
 padding: 20rpx 20rpx;
 border-bottom: 1rpx solid #95a5a6;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 font-size: 28rpx;
}

（3）search.js

  // 輸入框的值該改變 就會觸發的事件
 handleInput(e){  3     // 3 准備發送請求獲取數據
    let timeList =wx.getStorageSync("timeList");  5     console.log("timeList = ", timeList);  6     
    // 數據不太多的時候，可以不用防抖體驗更好
    // clearTimeout(this.TimeId);
    // this.TimeId=setTimeout(()=>{
      // 1 獲取輸入框的值 解構
      var value = e.detail.value; 12 
      // 2 檢驗合法性（判斷是不是全是空格）
      if (!value.trim()){ 15         // 當值為空時則清楚內容並且隱藏按鍵
        this.setData({ 17  showList: [], 18           isFocus: false
 }) 20         // 值不合法
        return; 22  } 23       this.setData({ 24         isFocus: true
 }) 26       var valueLowerCase = value.toLowerCase(); 27       var showListData = []; 28       // 搜索功能的實現就是遍歷每個數據看是否包含搜索的內容，有的話則顯示
      for (var i=0; i<timeList.length; i++) { 30         if (timeList[i].toLowerCase().indexOf(valueLowerCase)>=0) { 31  showListData.push(timeList[i]); 32  } 33  } 34       this.setData({ 35  showList: showListData 36  }); 37 
    // }, 1000);
 }, 40   // 點擊取消則清空內容並且隱藏按鍵
 handleCancel(){ 42     this.setData({ 43       inputValue: "", 44       isFocus: false, 45  showList: [] 46  }) 47  } 48 })

 

Search結果圖：