微信小程序：历史搜索及根据关键词列表查询

searchValue 是搜索内容，searchList 是存放搜索内容的数组，通过使用 wx.setStorageSync('searchList', searchList)在本地存储一个名为searchList（ps：也可以起个其他的名字，看您心情）的变量，然后在onload函数里面调用wx.getStorageSync('searchList'),并将值赋给data中的searchList，这样每次进入搜索页面时都会显示之前的搜索内容，也就是历史记录了
接下来就是对历史纪录的一些优化
1.搜索的内容和之前的搜索内容相同时，禁止存储到本地
2.优先展示最新的搜索内容
3.对展示的历史记录数量进行限制
4.历史记录可以一次性删除所有，也可以单个删除
5.点击历史记录，将历史记录显示在搜索框
6.点击搜索时，隐藏历史记录，显示符合条件的数据列表，并点击数据可以调转到对应的详情

search.js

// pages/job/search/search.js
var util = require('../../../utils/util.js');
Page({/*** 页面的初始数据*/data: {searchValue: '',searchList: [],isShow: true, //控制标签的是否可删除isTag: true, //控制标签的显示与隐藏isBtn: true, //控制删除按钮的显示与隐藏list: [], //查询列表showList: false,},//点击tag标签删除tagClick(e) {var a = e.currentTarget.dataset.indexlet searchList = this.data.searchList;searchList.splice(a, 1);this.setData({searchList: searchList})wx.setStorageSync('searchList', searchList)},giveInput(e) {let newIndex = e.currentTarget.dataset.index;let newSearch = this.data.searchList[newIndex];this.setData({searchValue: newSearch})},onChange(e) {this.setData({searchValue: e.detail})},//搜索onSearch() {let page = this;var inputValue = this.data.searchValue;var searchList = this.data.searchList || [];if (inputValue !== "") {//示例通用接口 获取列表信息wx.request({url: '此处省略哈/tag/getlist',//列表接口data: {table: 'job_position', //表名keywords: inputValue,fields: 'name'},method: 'GET',success(res) {console.log(res.data.data);let returnData = res.data.data;page.setData({list: returnData,})if (returnData.length > 0) {page.setData({showList: true,})} else {page.setData({showList: false,})}}})//若是输入的值不存在数组中则添加if (!searchList.includes(inputValue)) {//将搜索值放入历史记录中,只能放前五条if (searchList.length < 5) {searchList.unshift(inputValue)} else {searchList.pop() //删掉旧的时间最早的第一条searchList.unshift(inputValue)}//将历史记录数组整体储存到缓存中wx.setStorageSync('searchList', searchList)}} else {wx.showToast({title: '请输入搜索内容',icon: 'error',duration: 1500,})page.setData({showList: false,})}},//前往职位详情页面toJobDetail: util.throttle(function (e) {let id = e.currentTarget.dataset.id;wx.navigateTo({url: "/pages/job/jobDetail/jobDetail?id="+id,})}, 1000),// 删除图标searchDelete() {this.setData({isShow: false,isBtn: false})},//完成按钮finishClick() {this.setData({isShow: true,isBtn: true})},//全部删除按钮deleteAll() {wx.clearStorageSync('searchList')this.setData({searchList: []})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let localData = wx.getStorageSync('searchList');this.setData({searchList: localData})},
})

search.html

<view><van-search background="rgb(49, 121, 255)" value="{{searchValue}}" bind:change="onChange" shape="round"placeholder="输入职位 / 公司 / 标签" bind:search="onSearch" use-action-slot><view slot="action" bind:tap="onSearch" class="search_color">搜索</view></van-search><!-- 查询列表 --><view wx:for="{{list}}" wx:key="index" wx:if="{{showList}}" class="margin_top"><view class="job_list" bindtap="toJobDetail" data-id="{{item.id}}"><view class="job_list_top"><view class="job_list_top_left"><image class="job_list_top_left_image" src="{{item.logo}}"></image></view><view class="job_list_top_right"><view class="job_flex job_list_top_right_out"><view class="job_list_top_right_job">{{item.jobName}}</view><!-- <view class="job_list_top_right_zhaopin">{{item.jobFair}}</view> --><view></view></view><view class="job_flex job_list_top_center"><view class="job_list_top_right_name">{{item.name}}</view><view class="job_list_top_right_xinzi">￥{{item.min}}-{{item.max}}</view></view><view class="job_list_top_bottom job_list_top_right_name"><text>{{item.area}}</text> | <text>{{item.education}}</text> | <text>{{item.experience}}</text></view></view></view><view class="job_list_footer job_flex"><view class="job_list_footer_time"><text>面试时间：</text><text class="job_list_footer_time_color">{{item.face}}</text><!-- <text>面试时间：</text><text class="job_list_footer_time_color">短信通知</text> --></view><view>已申请 <text class="job_list_top_right_xinzi">{{item.applyNum}}</text> 人</view><!-- 若是申请后，则显示 --><!-- <view class="job_list_footer_applied">已申请</view> --></view></view></view><view class="search_history" wx:if="{{searchList.length>0 && !showList}}"><view>历史搜索</view><view wx:if="{{isBtn}}"><van-icon name="delete-o" size="45rpx" bindtap="searchDelete" /></view><view wx:else class="search_btn"><text bindtap="deleteAll">全部删除 </text>|<text class="search_btn_active" bindtap="finishClick"> 完成</text></view></view><view class="search_list" wx:for="{{searchList}}" wx:key="index"><van-tag class="search_list_tag" size="large" plain wx:if="{{isShow}}" bindtap="giveInput" data-index="{{index}}">{{item}}</van-tag><van-tag class="search_list_tag" size="large" closeable wx:else  plain  bindtap="tagClick" data-index="{{index}}">{{item}}</van-tag></view>
</view>

search.wxss

page {background-color: rgba(204, 204, 204, 0.596078431372549);
}
.search_color{color: #fff;
}
.search_history {display: flex;justify-content: space-between;margin: 20rpx;
}.search_list {margin: 20rpx;
}.search_list_tag {float: left;margin: 10rpx;
}
.search_btn{font-size: 13px;
}
.search_btn_active{color:rgb(49, 121, 255)
}.margin_top{margin-top:10px;
}
.job_list {margin: 0 auto;box-sizing: border-box;margin-bottom: 20rpx;width: calc(100% - 20rpx);/* border-radius: 10rpx; */background-color: #fff;height: 280rpx;padding-left: 10rpx;padding-right: 10rpx;box-sizing: border-box;
}.job_list_top {display: flex;justify-content: space-between;
}.job_list_top_left_image {width: 140rpx;height: 140rpx;
}.job_list_top_right {width: 560rpx;
}.job_flex {display: flex;justify-content: space-between;
}.job_list_top_right_out {margin-top: 20rpx;
}.job_list_top_right_job {font-size: 34rpx;height: 48rpx;line-height: 48rpx;width: 440rpx;Text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
}.job_list_top_right_zhaopin {font-size: 24rpx;text-align: center;height: 48rpx;line-height: 48rpx;color: #429EFD;border: 2rpx solid #429EFD;width: 90rpx;
}.job_list_top_right_name {font-size: 28rpx;
}.job_list_top_right_xinzi {color: #429EFD;
}.job_list_top_center {margin-top: 20rpx;
}.job_list_top_bottom {margin-top: 10rpx;color: rgba(51, 51, 51, 0.690196078431373);
}.job_list_footer {margin-top: 20rpx;font-size: 28rpx;color: rgba(51, 51, 51, 0.690196078431373);
}.job_list_footer_time_color {color: #FFA535;
}.job_list_footer_applied {color: #fff;background-color: rgba(153, 153, 153, 1);width: 132rpx;height: 52rpx;border-radius: 30rpx;text-align: center;line-height: 52rpx;
}

search.json

{"usingComponents": {"van-search": "@vant/weapp/search/index","van-icon":"@vant/weapp/icon/index","van-tag":"@vant/weapp/tag/index"},"navigationBarTitleText": "搜索"
}

util.js

//节流，防止短时间内点击多次导致页面跳转多次
const throttle = (fn, delay) => {let oldDate = Date.now();return function () {let args = arguments;let newDate = Date.now();let that = this;if (newDate - oldDate > delay) {fn.apply(that, args);//倘若时间差大于延长时间 就更新一次旧时间oldDate = Date.now();}}
}module.exports = {throttle: throttle,
}

微信小程序：历史搜索及根据关键词列表查询相关推荐

微信小程序--历史搜索功能的实现
最近公司在做一个内部的管理系统,是基于微信小程序的,我看了一下和Vue比较类似,布局方面有HTML和CSS基础的人都可以做,还是比较容易上手的,现在先记录一下搜索框保留搜索历史的功能的实现. ##wx ...
微信小程序历史搜索历史的本地缓存和删除
wxml: <view class='search_history' wx:if="{{isShow}}"><view class='history_title' ...
免费的微信小程序客服消息自定义关键词自动回复管理系统
源码名称:微信小程序客服消息自定义关键词回复管理系统框架版本:laravel5.8,和thinkphp类似的框架,会thinkphp就会laravel. 适用范围:二次开发,独立部署,客服自动回复 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...

微信小程序：历史搜索及根据关键词列表查询

微信小程序：历史搜索及根据关键词列表查询相关推荐

最新文章

热门文章