微信小程序实现搜索功能（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结果图：