搜索框是比较常用的,看似简单,逻辑甚是复杂,急需一个逻辑严谨、交互优雅、功能齐全的,假如您是需要搜索框附带热门搜索、历史搜索、帮助搜索等功能,恭喜,这个拿去用就是了。
先看效果
不信你试试,体验
如果你觉得还行的话,可以直接复制下面代码了,当然你也可以好好研究下边的代码,值得学习
js
Page({
data: {
keywrod: '',
searchStatus: false,
goodsList: [],
helpKeyword: [],
historyKeyword: [],
categoryFilter: false,
currentSortType: 'default',
currentSortOrder: '',
filterCategory: [],
defaultKeyword: {},
hotKeyword: [],
page: 1,
size: 20,
currentSortType: 'id',
currentSortOrder: 'desc',
categoryId: 0
},
//事件处理函数
closeSearch: function () {
wx.navigateBack()
},
clearKeyword: function () {
this.setData({
keyword: '',
searchStatus: false
});
},
onLoad: function () {
this.getSearchKeyword();
},
getSearchKeyword() {
let that = this;
//请求网络加载——获取历史搜索、热词搜索
that.setData({
historyKeyword: ["瑜伽垫子", "充电宝"],
defaultKeyword: {
keyword: "请输入商品"
},
hotKeyword: [{
keyword: "格子衬衫"
}, {
keyword: "背带裤"
}, {
keyword: "小白鞋"
}, {
keyword: "黄金眼霜"
}, {
keyword: "牛仔裤"
}, {
keyword: "口罩"
}]
});
},
inputChange: function (e) {
this.setData({
keyword: e.detail.value,
searchStatus: false
});
this.getHelpKeyword();
},
getHelpKeyword: function () {
let that = this;
//请求网络加载——获取搜索框提示词
that.setData({
helpKeyword: ["格子衬衫", "小白鞋", "背带裤", "黄金眼霜", "口罩", "牛仔裤"]
})
},
inputFocus: function () {
this.setData({
searchStatus: false,
goodsList: []
});
if (this.data.keyword) {
this.getHelpKeyword();
}
},
clearHistory: function () {
this.setData({
historyKeyword: []
})
//请求网络加载——清除历史数据
},
getGoodsList: function () {
let that = this;
//请求网络加载——获取商品列表
that.setData({
searchStatus: true,
categoryFilter: false,
goodsList: [{
id: "100000000",
list_pic_url: "cloud://normal-598/project/shangping/E4A9FCC49753209A34D200B4E376C3F2.jpg",
name: "时尚娃娃领蕾丝拼接花边连衣裙",
retail_price: 1000
}, {
id: "100000001",
list_pic_url: "cloud://nor24598/project/shangping/C4742392DD258AD08D4257B60C0840B4.jpg",
name: "无袖衬衫格子连衣裙",
retail_price: 800
}, {
id: "100000002",
list_pic_url: "cloud://normal-env-ta6924598/project/shangping/2AB3D2A1FBF8C903D546B1910B0B4FBE.jpg",
name: "中长款圆领网纱拼连衣裙",
retail_price: 800
}],
filterCategory: [{
name: "居家"
}],
page: 1,
size: 100
});
//重新获取关键词
that.getSearchKeyword();
},
onKeywordTap: function (event) {
this.getSearchResult(event.target.dataset.keyword);
},
getSearchResult(keyword) {
this.setData({
keyword: keyword,
page: 1,
categoryId: 0,
goodsList: []
});
this.getGoodsList();
},
openSortFilter: function (event) {
let currentId = event.currentTarget.id;
switch (currentId) {
case 'categoryFilter':
this.setData({
'categoryFilter': !this.data.categoryFilter,
'currentSortOrder': 'asc'
});
break;
case 'priceSort':
let tmpSortOrder = 'asc';
if (this.data.currentSortOrder == 'asc') {
tmpSortOrder = 'desc';
}
this.setData({
'currentSortType': 'price',
'currentSortOrder': tmpSortOrder,
'categoryFilter': false
});
this.getGoodsList();
break;
default:
//综合排序
this.setData({
'currentSortType': 'default',
'currentSortOrder': 'desc',
'categoryFilter': false
});
this.getGoodsList();
}
},
selectCategory: function (event) {
let currentIndex = event.target.dataset.categoryIndex;
let filterCategory = this.data.filterCategory;
let currentCategory = null;
for (let key in filterCategory) {
if (key == currentIndex) {
filterCategory[key].selected = true;
currentCategory = filterCategory[key];
} else {
filterCategory[key].selected = false;
}
}
this.setData({
'filterCategory': filterCategory,
'categoryFilter': false,
categoryId: currentCategory.id,
page: 1,
goodsList: []
});
this.getGoodsList();
},
onKeywordConfirm(event) {
this.getSearchResult(event.detail.value);
}
})
wxml
<scroll-view class="container" style="height: 100%;">
<view class="search-header">
<view class="input-box">
<image class="icon" src="https://6e6f-normal-env-ta4598.tcb.qcloud.la/project/wangyiyanxuan/icon/hxm_yanxuan-wap_p_20150730_style_img_icon-normal_search2-2fb94833aa.png?sign=af695f09ab760f7a2fe3fe020890c087&t=1583917399"></image>
<input name="input" class="keywrod" focus="true" value="{{keyword}}" confirm-type="search" bindinput="inputChange" bindfocus="inputFocus" bindconfirm="onKeywordConfirm" confirm-type="search" placeholder="{{defaultKeyword.keyword}}" />
<image class="del" wx:if="{{keyword}}" bindtap="clearKeyword" src="https://6e6f-no4598.tcb.qcloud.la/project/wangyiyanxuan/icon/hxm_yanxuan-wap_p_20150730_style_img_icon-normal_clearIpt-f71b83e3c2.png?sign=f7dcbca08c3a116c0d586909270c1e64&t=1583917343"></image>
</view>
<view class="right" bindtap="closeSearch">取消</view>
</view>
<view class="no-search" wx:if="{{ !searchStatus}}">
<view class="serach-keywords search-history" wx:if="{{!keyword && historyKeyword.length}}">
<view class="h">
<text class="title">历史记录</text>
<image class="icon" bindtap="clearHistory" src="https://6e6f-n598.tcb.qcloud.la/project/wangyiyanxuan/icon/hxm_yanxuan-wap_p_20150730_style_img_icon-normal_del1-93f0a4add4.png?sign=79b5e8665d885870ff23e527777fd206&t=1583917292"></image>
</view>
<view class="b">
<view class="item" bindtap="onKeywordTap" data-keyword="{{item}}" wx:for="{{historyKeyword}}" hover-class="navigator-hover">{{item}}</view>
</view>
</view>
<view class="serach-keywords search-hot" wx:if="{{!keyword}}">
<view class="h">
<text class="title">热门搜索</text>
</view>
<view class="b">
<view class="item {{item.is_hot === 1 ? 'active' : ''}}" hover-class="navigator-hover" bindtap="onKeywordTap" data-keyword="{{item.keyword}}" wx:for="{{hotKeyword}}">{{item.keyword}}</view>
</view>
</view>
<view class="shelper-list" wx:if="{{keyword}}">
<view class="item" hover-class="navigator-hover" wx:for="{{helpKeyword}}" bindtap="onKeywordTap" data-keyword="{{item}}">{{item}}</view>
</view>
</view>
<view class="search-result" wx:if="{{ searchStatus && goodsList.length}}">
<view class="sort">
<view class="sort-box">
<view class="item {{currentSortType == 'default' ? 'active' : ''}}" bindtap="openSortFilter" id="defaultSort">
<text class="txt">综合</text>
</view>
<view class="item by-price {{currentSortType == 'price' ? 'active' : ''}} {{currentSortOrder == 'asc' ? 'asc' : 'desc'}}" bindtap="openSortFilter" id="priceSort">
<text class="txt">价格</text>
</view>
<view class="item {{currentSortType == 'category' ? 'active' : ''}}" bindtap="openSortFilter" id="categoryFilter">
<text class="txt">分类</text>
</view>
</view>
<view class="sort-box-category" wx-if="{{categoryFilter}}">
<view class="item {{item.checked ? 'active' : ''}}" wx:for="{{filterCategory}}" wx:key="cate-{{item.id}}" data-category-index="{{index}}" bindtap="selectCategory">{{item.name}}</view>
</view>
</view>
<view class="cate-item">
<view class="b">
<navigator class="item {{(iindex + 1) % 2 == 0 ? 'item-b' : ''}}" url="/pages/goods/goods?id={{iitem.id}}" wx:for="{{goodsList}}" wx:for-item="iitem" wx:for-index="iindex">
<image class="img" src="{{iitem.list_pic_url}}" background-size="cover"></image>
<text class="name">{{iitem.name}}</text>
<text class="price">¥{{iitem.retail_price}}</text>
</navigator>
</view>
</view>
</view>
<view class="search-result-empty" wx:if="{{!goodsList.length && searchStatus}}">
<image class="icon" src="https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/project/wangyiyanxuan/icon/hxm_yanxuan-wap_p_20161201_style_img_icon-normal_noSearchResult-7572a94f32.png?sign=20adb623b971e8e8cb6fc453a25f17bc&t=1583917226"></image>
<text class="text">您寻找的商品还未上架</text>
</view>
</scroll-view>
wxss
page{
min-height: 100%;
background-color: #f4f4f4;
}
view,image,text,navigator{
box-sizing: border-box;
padding:0;
margin:0;
}
view,text{
font-family: PingFangSC-Light,helvetica,'Heiti SC';
font-size: 29rpx;
color: #333;
}
.container{
min-height: 100%;
background-color: #f4f4f4;
box-sizing: border-box;
font-family: PingFangSC-Light,helvetica,'Heiti SC';
}
.search-header{
position: fixed;
top: 0;
width: 750rpx;
height: 91rpx;
display: flex;
background: #fff;
border-bottom: 1px solid rgba(0,0,0,.15);
padding: 0 31.25rpx;
font-size: 29rpx;
color: #333;
}
.search-header .input-box{
position: relative;
margin-top: 16rpx;
float: left;
width: 0;
flex: 1;
height: 59rpx;
line-height: 59rpx;
padding: 0 20rpx;
background: #f4f4f4;
}
.search-header .icon{
position: absolute;
top: 14rpx;
left: 20rpx;
width: 31rpx;
height: 31rpx;
}
.search-header .del{
position: absolute;
top: 3rpx;
right: 10rpx;
width: 53rpx;
height: 53rpx;
z-index: 10;
}
.search-header .keywrod{
position: absolute;
top: 0;
left: 40rpx;
width: 506rpx;
height: 59rpx;
padding-left: 30rpx;
}
.search-header .right{
margin-top: 24rpx;
margin-left: 31rpx;
margin-right: 6rpx;
width: 58rpx;
height: 43rpx;
line-height: 43rpx;
float: right;
}
.no-search{
height: auto;
overflow: hidden;
margin-top: 91rpx;
}
.serach-keywords{
background: #fff;
width: 750rpx;
height: auto;
overflow: hidden;
margin-bottom: 20rpx;
}
.serach-keywords .h{
padding: 0 31.25rpx;
height: 93rpx;
line-height: 93rpx;
width: 100%;
color: #999;
font-size: 29rpx;
}
.serach-keywords .title{
display: block;
width: 120rpx;
float: left;
}
.serach-keywords .icon{
margin-top: 19rpx;
float: right;
display: block;
margin-left: 511rpx;
height: 55rpx;
width: 55rpx;
}
.serach-keywords .b{
width: 750rpx;
height: auto;
overflow: hidden;
padding-left: 31.25rpx;
}
.serach-keywords .item{
display: inline-block;
width: auto;
height: 48rpx;
line-height: 48rpx;
padding:0 15rpx;
border: 1px solid #999;
margin: 0 31.25rpx 31.25rpx 0;
font-size: 24rpx;
color: #333;
}
.serach-keywords .item.active{
color: #b4282d;
border: 1px solid #b4282d;
}
.shelper-list{
width: 750rpx;
height: auto;
overflow: hidden;
background: #fff;
padding: 0 31.25rpx;
}
.shelper-list .item{
height: 93rpx;
width: 687.5rpx;
line-height: 93rpx;
font-size: 24rpx;
color: #333;
border-bottom: 1px solid #f4f4f4;
}
.sort{
position: fixed;
top: 91rpx;
background: #fff;
width: 100%;
height: 78rpx;
}
.sort-box{
background: #fff;
width: 100%;
height: 78rpx;
overflow: hidden;
padding: 0 30rpx;
display: flex;
border-bottom: 1px solid #d9d9d9;
}
.sort-box .item{
height: 78rpx;
line-height: 78rpx;
text-align: center;
flex:1;
color: #333;
font-size: 30rpx;
}
.sort-box .item .txt{
display: block;
width: 100%;
height: 100%;
color: #333;
}
.sort-box .item.active .txt{
color: #b4282d;
}
.sort-box .item.by-price{
background: url(https://6e6f-normalloud.la/project/wangyiyanxuan/icon/hxm_yanxuan-wap_p_20161201_style_img_icon-normal_no-3127092a69.png?sign=7941253b377d6a263f12d720aa479d25&t=1583928039) 155rpx center no-repeat;
background-size: 15rpx 21rpx;
}
.sort-box .item.by-price.active.asc{
background: url(https://6e6f-norb.qcloud.la/project/wangyiyanxuan/icon/hxm_yanxuan-wap_p_20161201_style_img_icon-normal_up-636b92c0a5.png?sign=99ac0c167ab94d95c37640e9b0812b40&t=1583917134) 155rpx center no-repeat;
background-size: 15rpx 21rpx;
}
.sort-box .item.by-price.active.desc{
background: url(https://6e6loud.la/project/wangyiyanxuan/icon/hxm_yanxuan-wap_p_20161201_style_img_icon-normal_down-95e035f3e5.png?sign=9bd60d4c35b1464491f8d1f212d315f5&t=1583917041) 155rpx center no-repeat;
background-size: 15rpx 21rpx;
}
.sort-box-category{
background: #fff;
width: 100%;
height: auto;
overflow: hidden;
padding: 40rpx 40rpx 0 0;
border-bottom: 1px solid #d9d9d9;
}
.sort-box-category .item{
height: 54rpx;
line-height: 54rpx;
text-align: center;
float: left;
padding: 0 16rpx;
margin: 0 0 40rpx 40rpx;
border: 1px solid #666;
color: #333;
font-size: 24rpx;
}
.sort-box-category .item.active{
color: #b4282d;
border: 1px solid #b4282d;
}
.cate-item{
margin-top: 175rpx;
height: auto;
overflow: hidden;
}
.cate-item .h{
height: 145rpx;
width: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cate-item .h .name{
display: block;
height: 35rpx;
margin-bottom: 18rpx;
font-size: 30rpx;
color: #333;
}
.cate-item .h .desc{
display: block;
height: 24rpx;
font-size: 24rpx;
color: #999;
}
.cate-item .b{
width: 750rpx;
padding: 0 6.25rpx;
height: auto;
overflow: hidden;
}
.cate-item .list-filter{
height: 80rpx;
width: 100%;
background: #fff;
margin-bottom: 6.25rpx;
}
.cate-item .b .item{
float: left;
background: #fff;
width: 365rpx;
margin-bottom: 6.25rpx;
padding-bottom: 33.333rpx;
height: auto;
overflow: hidden;
text-align: center;
}
.cate-item .b .item-b{
margin-left: 6.25rpx;
}
.cate-item .item .img{
width: 302rpx;
height: 302rpx;
}
.cate-item .item .name{
display: block;
width: 365.625rpx;
height: 35rpx;
margin: 11.5rpx 0 22rpx 0;
text-align: center;
overflow: hidden;
padding: 0 20rpx;
font-size: 30rpx;
color: #333;
}
.cate-item .item .price{
display: block;
width: 365.625rpx;
height: 30rpx;
text-align: center;
font-size: 30rpx;
color: #b4282d;
}
.search-result-empty{
width: 100%;
height: 100%;
padding-top: 300rpx;
}
.search-result-empty .icon{
margin: 0 auto;
display: block;
width: 240rpx;
height: 240rpx;
}
.search-result-empty .text{
display: block;
width: 100%;
height: 40rpx;
font-size: 28rpx;
text-align: center;
color: #999;
}