### [小程序中搜索功能的实现方法（代码）](https://www.prosaas.cn/article/17050)

**Published:** 2018-09-07T06:52:15

**Author:** 5201314

**Excerpt:** 小程序中搜索功能是非常重要的，毕竟有了搜索功能会给该用户很大的方便，下面我们就来看看小程序中如何实现搜索功能。…

小程序中搜索功能是非常重要的，毕竟有了搜索功能会给该用户很大的方便，下面我们就来看看小程序中如何实现搜索功能。

## 1.页面

<!--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>

## 2.css

@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; 
    }

## 3.js

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,
      });

    })
  },

})

相关推荐：

微信小程序开发中怎样实现搜索内容高亮功能

小程序开发实现搜索全部城市列表界面

以上就是小程序中搜索功能的实现方法（代码）的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---