小程序中搜索功能怎么弄

这篇文章主要介绍了小程序中搜索功能怎么弄，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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

感谢你能够认真阅读完这篇文章，希望小编分享的“小程序中搜索功能怎么弄”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!