小程序中搜索功能是非常重要的，毕竟有了搜索功能会给该用户很大的方便，下面我们就来看看小程序中如何实现搜索功能。
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.jsconst 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, }); }) },})
相关推荐：
微信小程序开发中怎样实现搜索内容高亮功能
小程序开发实现搜索全部城市列表界面
以上就是小程序中搜索功能的实现方法（代码）的详细内容。