小程序中搜索功能的实现方法（代码）
- 不言原创
- 2018-09-07 14:52:1512270浏览
小程序中搜索功能是非常重要的，毕竟有了搜索功能会给该用户很大的方便，下面我们就来看看小程序中如何实现搜索功能。
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,
});
})
},
})
相关推荐：
以上是小程序中搜索功能的实现方法（代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn