小程序中搜索功能的实现方法（代码）

<!--pages/review/search/search.wxml--><view class="page">  <view class="weui-search-bar">    <form bindsubmit="searchA" class="weui-search-bar__form" style="background-color:#eee;position:relative;">      <view>        <view class="weui-search-bar__box">          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>          <input type="text" class="weui-search-bar__input" name="keyword" confirm-type="search" bindconfirm="searchB"           placeholder="搜索姓名、节目名、年份、老师名" value="{{inputVal}}" focus="{{inputShowed}}" bindfocus="" />          <button class="search-btn" formType="submit">搜索</button>        </view>      </view>    </form>  </view>  <block wx:if='{{isSearching}}'>     <view>      <view class="search-title">热门搜索</view>      <view class="zj">        <block wx:for='{{hotTag}}' wx:key='id'>          <view class='tags' data-keyword='{{item}}' bindtap='searchHot'>{{item}}</view>        </block>      </view>    </view>  </block>  <block wx:else>    <block wx:if='{{searchData.length==0}}'>      <view class='search-hint'>        没有符合条件的选项      </view>    </block>    <block wx:else>      <view class='search-list'>      <block wx:for='{{searchData}}' wx:key='id'>    <navigator url="{{item.itemtype==2?'../videodetil/index?itemid='+item.id:'../material/index?itemid='+item.id}}" class="" style=''>        <view class='search-item'>          {{item.title}}        </view>      </navigator>      </block>      </view>    </block>  </block></view>

@import '../common/lib/weui.wxss';    .weui-search-bar{      border-top:0px;      background-color:white;      border-bottom:0px;    }    .weui-search-bar__label{      background:#F0F0F0;            }    .weui-search-bar__form {      border-radius:8px;      width:686rpx;      height: 2.9%;      margin-bottom: 1.3%;    }    .weui-icon-search{      margin-left:7px;          }    .weui-search-bar__box{      width: 91.5%;      height: 2.9%;    }    .page__hd{      width: 708rpx;       height: 228rpx;      margin-left: 2.3%;    }    .swiper-ad {      height: 228rpx;      width: 100%;    }    .swiper-image {      height: 100%;      width: 100%;    }        .title-hd{      font-family: PingFangSC-Semibold;      font-size: 22px;      color: #333333;      letter-spacing: 0;      text-align: center;      line-height: 22px;      width: 25.5%;      height: 44rpx;      margin-top: 32rpx;      margin-left: 2.3%;      margin-bottom: 32rpx;    }    .info-top{      background-color: white;      position: relative;      height:150rpx;      border-bottom:1px solid #F0F0F0;      width: 94.5%;       margin-left: 2.3%;    }    .info-vip{      position: absolute;      left:40rpx;    }    .info-bm{      position: absolute;      left:224rpx;    }    .info-sc{      position: absolute;      left:408rpx;    }    .info-zb{      position: absolute;      left:592rpx;    }    .info-img{      margin-top: 30rpx;       width: 76rpx;      height:76rpx;    }    .info-right{      float:right;    }    .info-font{    font-family: PingFangSC-Regular;    font-size: 14px;    color: #666666;    letter-spacing: 0;    line-height: 14px;    text-align: center;    }    .hd{      width: 94.5%;      height: 598rpx;       box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);      border-radius: 8px;      margin-left: 2.3%;      margin-top: 32rpx;    }    .hd-zt{      height:600rpx;      margin-bottom: 40rpx;      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);      border-radius: 8px;    }    .hd-pic{      width: 100%;       height:386rpx;     }    .hd-title{      font-family: PingFangSC-Regular;    font-size: 16px;    color: #333333;    letter-spacing: 0;    line-height: 16px;    margin-top:24rpx;    margin-left: 24rpx;     }    .hd-price{    font-family: PingFangSC-Regular;    font-size: 14px;    color: #999999;    letter-spacing: 0;    line-height: 14px;    margin-top:48rpx;    margin-left: 24rpx;     }    .searchbar-result{        margin-top: 0;        font-size: 14px;    }    .searchbar-result:before{        display: none;    }    .weui-cell{        padding: 12px 15px 12px 35px;    }    .placeholder{        width:50%;        margin: 5px;        padding: 0 10px;        text-align: center;        background-color: #EBEBEB;        height: 2.3em;        line-height: 2.3em;        color: #cfcfcf;    }    .weui-grid_border{      width:708.75rpx;      height:560rpx;      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);      border-radius: 8px;           }    .weui-grid__product{      display:block;      width:708.75rpx;      height:386rpx;      margin:0 auto;      padding-top:10px;      margin-bottom: 10px;        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);       border-bottom:0;       border-radius: 8px;      }    .weui-grid_font{      background-color: white;      height:78px;          border-top:0;       padding-top: 4rpx;      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);      border-radius: 8px;    }    .product-price{      font-size:14px;      color:#996B7A;      padding-top:5px;      text-align:center;      }    .weui-underline{      text-align:center;       color:#F0C4D3;      margin-top: -5px;    }        .category-item{        border:0px;          background-color:white;          width:25%;    }        .category-item{      border:0px;      background-color:white;    width:25%;    }    .category-pic{    display:block;width:50px;height:50px;margin:0 auto    }    .category-name    {      margin-top:6px;display:block;text-align:center;color:#82501e;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;    }    .active-nav-border{      margin:20rpx auto 40rpx auto;       width: 60rpx;      height: 4rpx;      background: rgb(240,196,211);    }    .page-version{      margin-top:20rpx;      padding: 30rpx 50rpx 30rpx;      text-align: center;      color:#ccc;       background-color: white;      font-size:12px;    }    .scroll-view_H{        white-space: nowrap;          }      .scroll-view-item{        height: 200px;      }      .scroll-view-item_H{        display: inline-block;        width: 320rpx;        height: 180rpx;       margin-left: 20rpx;     }      .sp{      width: 300rpx;      height: 68rpx;      font-size: 34px;      color: #303030;      letter-spacing: 0;      line-height: 68rpx;      margin-bottom: 40rpx;      margin-left:32rpx;    }    .zj{    font-family: PingFangSC-Regular;    font-size: 14px;    color: #999999;    letter-spacing: 0;    line-height: 16px;     margin:20px 0 40rpx 20px;    position: relative;    }    .tags {      font-size: 14px;      color: #999999;      letter-spacing: 0;      line-height: 16px;       display: inline-block;      height: 18px;      padding:8px;       margin:10px;      border-radius:5px;      background:#f3f3f6;    }    .search-title {      margin-left: 40rpx;      color:#999999;    }    .search-list, {      padding:0 20px;    }    .search-hint {      padding: 0 20px;      color:#999;      font-size:14px;    }    .search-item {      width:100%;      margin:5px 0;      background:#eee;      padding:5px;      border-radius:5px;      height: 18px;      line-height: 18px;      font-size:14px;    }    .search-btn {        position: absolute;        z-index: 11;        top: -20rpx;        right: -42rpx;        height: 54rpx;        width: 120rpx;        text-align: center;        line-height: 76rpx;        font-size: 28rpx;        border-bottom-left-radius: 0;        border-top-left-radius: 0;        background-color: #eee;    }        .search-btn::after{        border-bottom-left-radius: 0;        border-top-left-radius: 0;         border:0;     }

const requestApi = require('../../utils/request.js')const app = getApp()Page({  data: {    isSearching: true,    pageindex: 0,    pagesize: 20,    hotTag: ['群舞', '原创', '舞蹈', '唱歌'],    historyTag: ['小舞蹈家', '最美童声'],    searchData: []  },  onLoad(options) {  },  onShow() {    this.setData({      isSearching:true    })  },    //点击搜索触发事件  searchA(e) {    let keywords = e.detail.value.keyword    console.log("eeeee",e)    if(!keywords.length) {      wx.showToast({        title: '不能为空',        icon: 'loading',        duration: 2000      })      return;    }    this.search(keywords)  },//点击热门搜索触发事件  searchHot(e) {    let keywords = e.target.dataset.keyword;    this.setData({      inputVal: keywords,    })    this.search(keywords)  },//接口配置  search(keywords) {    let params = {      appid: app.appId,      openid: app.openId,      pageindex: this.data.pageindex,      pagesize: this.data.pagesize,      secret: app.secret,      keywords    }    let urlPath = '/api/item/search'    requestApi.doPost(urlPath, params, res => {      console.log('搜索接口', res);      this.setData({        searchData:res.data,        isSearching:false,      });    })  },})