微信小程序搜索功能实现

js

const config = require('../../utils/config.js')
//获取应用实例
const app = getApp()

Page({
  data: {
    search: {
      searchValue: '',
      showClearBtn: false
    },
    pageNum: 1,
    pageSize: 30,
    hasMoreData: true,
    searchResult: []
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  //输入内容时
  searchActiveChangeinput: function (e) {
    const val = e.detail.value;
    console.log(val);
    this.setData({
      'search.showClearBtn': val != '' ? true : false,
      'search.searchValue': val
    })
  },
  //点击清除搜索内容
  searchActiveChangeclear: function (e) {
    this.setData({
      'search.showClearBtn': false,
      'search.searchValue': ''
    })
  },
  //点击聚集时
  focusSearch: function () {
    console.log("--------------" + this.data.search.searchValue);
    if (this.data.search.searchValue!='') {
      this.setData({
        'search.showClearBtn': true
      })
    }
    console.log("--------------" + this.data.search.showClearBtn);
  },
  searchSubmit:function(){
    var that = this;
    that.setData({
      searchResult: [],
      hasMoreData: true,
      pageNum: 1
    })
    that.doSearch();
  },
  //搜索提交
  doSearch: function () {
    const val = this.data.search.searchValue;
    var sessionKey = wx.getStorageSync(config.TOKEN_KEY);
    if (val) {
      const that = this,
        app = getApp();
      wx.showToast({
        title: '搜索中',
        icon: 'loading'
      });
      wx.request({
        url: config.getFullurl("/getContentList"),
        data: {
          keyword: val,
          pageNum: that.data.pageNum,
          pageSize: that.data.pageSize
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          'WX_TOKEN': sessionKey
        },
        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        // header: {}, // 设置请求的 header
        success: function (res) {
          var contentlistTem = that.data.searchResult;
          if (res.data.status == 200) {
            if (that.data.pageNum == 1) {
              contentlistTem = []
            }
            var contentlist = res.data.data.pageData;
            console.log(that.data.pageNum);
            console.log(res.data.data);
            if (that.data.pageNum >= res.data.data.pageInfo.pageCount) {
              that.setData({
                searchResult: contentlistTem.concat(contentlist),
                hasMoreData: false,
                'search.showClearBtn': false
              })
            } else {
              that.setData({
                searchResult: contentlistTem.concat(contentlist),
                hasMoreData: true,
                pageNum: that.data.pageNum + 1,
                'search.showClearBtn': false,
              })
            }

          } else {
            wx.showToast({
              title: res.data.msg,
              success: function () {
                wx.redirectTo({
                  url: '../login/login',
                })
              }
            })
          }
        },
        fail: function () {
          // fail
          wx.showToast({
            title: '加载数据失败',
            icon: none
          })
        },
        complete: function () {
          // complete
          wx.hideToast();
        }
      })
    }
  },
  /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
  onPullDownRefresh: function () {
    this.data.pageNum = 1
    this.doSearch()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.hasMoreData) {
      this.doSearch()
    } else {
      wx.showToast({
        title: '没有更多数据',
      })
    }
  },
})

wxml

    <view class="search__top">
      <form class="search__form" bindsubmit="searchSubmit">
        <input value="{{search.searchValue}}" placeholder="关键字搜索" class="search__input" bindfocus="focusSearch" bindinput="searchActiveChangeinput" auto-focus="true" name="teamSearchKeyWords" style='padding-left:40rpx' />
         <view class="search__icon search__active" style="background:none;position:absolute;border:none;left:0;top:10rpx;bottom:0;width:40rpx;">
          <icon type="search" size="13" color="#888" style="position:absolute;float:left;margin-right:20rpx;"></icon>
        </view>   
        <button wx:if="{{search.showClearBtn}}" catchtap="searchActiveChangeclear" form-type="reset" style="background:none;position:absolute;border:none;right:0;top:0;bottom:0;width:80rpx;">
          <icon type="clear" size="19" color="#aaa" style="position:absolute;right:15rpx;top:10rpx;z-index:3;"></icon>
        </button> 
      </form>
    </view>
    <view class="panel" wx:if="{{search.showClearBtn}}" catchtap="searchSubmit"  >
      <view class="panel__bd">
        <view class="media-box media-box_small-appmsg">
          <view class="cells">
            <view class="a cell cell_access clearfix">
              <view class="cell__hd" style="float:left;background-color:#1AAD19;border-radius:7rpx;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;">
                <icon type="search" size="24" color="#fff" style="margin-top:20rpx;"></icon>
              </view> 
              <view class="cell__bd cell_primary clearfix">
                <view class="p" style="padding-left:20rpx;font-size:34rpx;float:left;"><text style="color:#000;">搜索:</text><text style="color:#1AAD19;margin-left:20rpx;">{{search.searchValue}}</text></view>
              </view>
              <text class="cell__ft"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <block wx:for="{{searchResult}}" wx:for-item="item" wx:key="id" >
    <navigator url="/pages/detail/detail?contentId={{item.content_id}}">
      <view class="person__top__wrapper">
        <!-- <view class="person__top__avatar">
          <image src="{{item.team_avator}}" />
        </view> -->
        <view class="person__top__userinfo">
          <view class="h3 justify">{{item.title}}</view>
          <view class="h4 justify">{{item.release_date}}</view>
        </view>
      </view>
    </navigator>
    </block>

wxss

    page{
        background-color:#EFEFF4;
    }
    .person__top__wrapper{
        width:100%;
        box-sizing:border-box;
        padding-left:28rpx;
        padding-right:28rpx;
        padding-top:24rpx;
        padding-bottom:24rpx;
        border-top:1rpx solid #e5e5e5;
        border-bottom:1rpx solid #e5e5e5;
        height:178rpx;
        margin-top:30rpx;
        background-color:#fff;
        position: relative;
    }
    .person__top__avatar{
        border:1rpx solid #e5e5e5;
        width:130rpx;
        height:130rpx;
        overflow: hidden;
        box-sizing:content-box;
        float: left;
    }
    .person__top__avatar image{
        width:130rpx;
        height:130rpx;
        border-radius:7rpx;
    }
    .person__top__userinfo{
        right:0;
        overflow: hidden;
        position: absolute;
        left:182rpx;
        box-sizing:border-box;
        top:44rpx;
        color:#000;
        font-family:'微软雅黑';
        font-weight:500;    
        bottom:44rpx;
    }
    .person__top__userinfo .h2{
        width:300rpx;
        height:90rpx;
        line-height:90rpx;
        font-size:36rpx;  
    }
    .person__top__userinfo .h3{
        width:300rpx;
        height:60rpx;
        font-size:30rpx;  
    }
    .person__top__userinfo .h4{
        width:300rpx;
        height:30rpx;
        font-size:24rpx;    
    }
    .person__top__userinfo::after {
      content: " ";
      display: inline-block;
      height: 17rpx;
      width: 17rpx;
      border-width: 2rpx 2rpx 0 0;
      border-color: #C6C6CB;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
              transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: absolute;
      top: 50%;
      margin-top: -10rpx;
      right: 30rpx;
    }
    .person__top__userinfo image{
      display: inline-block;
      height: 34rpx;
      width: 34rpx;
      top: 50%;
      margin-top: -17rpx;
      position: absolute;
      right: 58rpx;
    }
    button::after{
        border:none;
    }
    .person__top__wrapper{
        margin-top:0;
        border-top:none;
    }
    .panel{
      width:100%;
      background: #e5e5e5;
      position: fixed;
      top: 37px;
      left: 0;
      padding:5px;
      box-sizing: border-box;
      z-index: 99;
    }
    .clearfix::after{
      content: "";
      display: block;
      height:0;
      clear: both;
    }
.search__top{
width:100%;
position: fixed;
top:0;
left:0;
background: #fff;
padding:5px;
box-sizing: border-box;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
z-index: 100;
}
.search__top input{
  background: #e5e5e5;
}