Implementation method of search function in mini program (code)

The search function in the mini program is very important. After all, the search function will bring great convenience to the user. Let’s take a look at how to implement the search function in the mini program.

1. Page

<!--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=&#39;{{isSearching}}&#39;>
     <view>
      <view class="search-title">热门搜索</view>
      <view class="zj">
        <block wx:for=&#39;{{hotTag}}&#39; wx:key=&#39;id&#39;>
          <view class=&#39;tags&#39; data-keyword=&#39;{{item}}&#39; bindtap=&#39;searchHot&#39;>{{item}}</view>
        </block>
      </view>
    </view>
  </block>
  <block wx:else>
    <block wx:if=&#39;{{searchData.length==0}}&#39;>
      <view class=&#39;search-hint&#39;>
        没有符合条件的选项
      </view>
    </block>
    <block wx:else>
      <view class=&#39;search-list&#39;>
      <block wx:for=&#39;{{searchData}}&#39; wx:key=&#39;id&#39;>
    <navigator url="{{item.itemtype==2?&#39;../videodetil/index?itemid=&#39;+item.id:&#39;../material/index?itemid=&#39;+item.id}}" class="" style=&#39;&#39;>
        <view class=&#39;search-item&#39;>
          {{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,
      });

    })
  },

})

Related recommendations:

微信小How to implement the search content highlighting function in program development

Develop a small program to implement the search all city list interface

The above is the detailed content of Implementation method of search function in mini program (code). For more information, please follow other related articles on the PHP Chinese website!