python 输入框查询_Element输入框带历史查询记录
需求描述
页面的查询框增加一下显示历史查找记录
实现及踩坑记录
使用Element带输入建议的输入框来实现此需求。用法详见官网
1. 坑1:不能直接在querySearch里返回数组,一定要调用回调函数cb来处理数据
看了一下例子,建议列表应该是个数组,然后我就在querySearch里直接返回了一个数组:
querySearch(queryString, cb) {
return JSON.parse(localStorage.getItem('srcOrderNoArr'))
},
但是回到网页上却发现列表数据加载不出来
正确姿势:
/**
* 建议列表
*/
querySearch(queryString, cb) {
// 调用 callback 返回建议列表的数据
cb(JSON.parse(localStorage.getItem('srcOrderNoArr')))
}
2. 坑2:数组内数据格式有要求,格式一定要是[{value: '', xxx: ''}, {value: '', xxx: ''}, ...]
这个建议列表是根据数组内的value属性值来渲染的,所以数组内的对象一定要有value键值对。比如说是这样的:
data () {
return {
srcOrderNoArr: [{
value: '', // 这个必须要有
type: ''
},
{
value: '',
type: ''
},
{
value: '',
type: ''
}]
}
}
methods: {
/**
* 把搜索记录存入localStorage
*/
setIntoStorage (type) {
let self = this
let noArr = [], // 订单号历史记录数组
text = '', value = ''
switch (type) {
case 'srcOrderNo':
text = 'srcOrderNoArr'
value = self.srcOrderNo
break
case 'jobOrderNo':
text = 'jobOrderNoArr'
value = self.jobOrderNo
break
case 'cntNo':
text = 'cntNoArr'
value = self.cntNo
break
default:
break
}
noArr.push({value: value, type: type})
if(JSON.parse(localStorage.getItem(text))) { // 判断是否已有xxx查询记录的localStorage
if(localStorage.getItem(text).indexOf(value) > -1 ) { // 判断是否已有此条查询记录,若已存在,则不需再存储
return
}
if(JSON.parse(localStorage.getItem(text)).length >= 5) {
let arr = JSON.parse(localStorage.getItem(text))
arr.pop()
localStorage.setItem(text, JSON.stringify(arr))
}
localStorage.setItem(text, JSON.stringify(noArr.concat(JSON.parse(localStorage.getItem(text)))))
}
else { // 首次创建
localStorage.setItem(text, JSON.stringify(noArr))
}
}
}
参考
python 输入框查询_Element输入框带历史查询记录相关推荐
- 域名历史查询工具-批量域名历史注册记录查询
批量备案域查询 在互联网时代,域名备案已经成为一项必要工作,但是批量备案域名是一项繁琐和费力的工作.为了帮助企业和个人轻松应对域名备案,出现了一种新型的解决方案--批量备案域名查询监控软件. 这种软件 ...
- vue 移动端搜索功能(带历史搜索记录)
实现效果如图: 实现的功能: 1.点击搜索,把搜索的值存入本地记录,并展示 2.搜索相同的值,要删除旧数据,把新数据放进数组首位 3.清空历史记录 html代码: <div class=&quo ...
- Element输入框带历史查询记录
需求描述 页面的查询框增加一下显示历史查找记录 实现及踩坑记录 使用Element带输入建议的输入框来实现此需求.用法详见官网 1. 坑1:不能直接在querySearch里返回数组,一定要调用回调函 ...
- SQL查询日志 查看数据库历史查询记录的方法
在查询分析器中写了半天的SQL,竟忘了保存,坑爹啊~想找回某段时间曾执行过的一段SQL语句,怎么办? 好吧,到数据库日志中去找找,通过时间.关键字批配..能想到的全用上吧. 首先假定你执行过它.没有? ...
- 如何用python获取和保存B站历史播放记录
为什么要保存 B 站视频的播放记录呢? 因为 B 站的历史记录,最多保存 3 个月,超过 3 个月自动清除.所以我专门写一个脚本,将历史记录导出,保存在数据库中,一来是是以备以后需要时能够找到,二来也 ...
- Android开源实战:SearchView搜索框(含历史搜索记录)
前言 Android开发中,类似下图的搜索功能非常常见 搜索功能 今天,我将手把手教大家实现一款 封装了 历史搜索记录功能 & 样式 的Android 自定义搜索框 开源库,希望你们会喜欢. ...
- Android 天气APP(十五)增加城市搜索、历史搜索记录
上一篇:Android 天气APP(十四)修复UI显示异常.优化业务代码逻辑.增加详情天气显示 添加城市 新版------------------- 一.推荐城市数据 二.推荐城市item布局和适配器 ...
- 在PTA习题集中快速查找自己的历史提交记录
今天有小伙伴反映PTA的习题集关闭了之后,就没有我的提交列表了,找自己的历史提交记录就得在提交记录里一页一页地翻,特别麻烦,所以写了个脚本来方便大家查找 脚本效果大概就是这个样子的,可以快速查询自己的 ...
- ElementUI 组件 el-autocomplete 实现文本框历史查询建议
前言 需求:输入开票主体:该操作框为下拉输入框,用户可选择历史充值过的开票主体,也可以重新输入新的开票主体 此处根据需求实现"开票主体历史搜索建议"功能,按照需求的下拉框 el-s ...
最新文章
- Oracle数据库备份与恢复的三种方法
- mysql 面试知识点笔记(二)查询优化及索引越多越好吗?
- 《计算机组成原理》第08章在线测试
- 使用Cloud Application Programming模型开发OData的一个实际例子
- 在python中模块可以封装_python 制作python包,封装成可用模块教程
- 第四讲 构建安全的Microsoft ASP.NET 应用的最佳实践和技术
- 三人小组关系c语言编程,理性分析一下c-block三人组的实力
- 无人出价!贾跃亭所持2210万股乐视网股票首次拍卖流拍
- ffmpeg获取设备支持的分辨率_Qt音视频开发6-ffmpeg解码处理
- linux硬链接符号,Linux — 硬链接与符号链接
- mysql 虚拟表 分页_MySql大表分页(附独门秘技)
- 判断平面内两直线平行c语言,总结平行线的判定课后测试题
- 像中文的罗马音字体复制_罗马音字体大全可复制中文
- 苹果手机左上角的数字怎么弄_手把手教你把抖音视频音乐设置为手机铃声。
- “鲲鹏”展翅 宝德“自强”
- [Go] 理解计算机负数的表示以及整数范围
- hazelcast 搭建_hazelcast教程 入门
- 清明2013——祭父
- SpringCloud学习(十八):Config分布式配置中心的介绍与搭建
- FastDB.html
热门文章
- Redo Log 和Checkpoint not complete
- python帮助文档在哪_python文档在哪里
- Mybatis源码日志模块分析
- python创建数组与列表_python基础(三):数组和列表
- 如何安装python3.8.1_python3.8.1 安装
- 将八进制数制转换为二进制,十进制和十六进制数制
- puppeteer api_使用Node.js和puppeteer API从URL创建PDF文件
- mysql验证身份证号正确_通过SQL校验身份证号码是否正确
- length函数的头文件_Framebuffer 应用编程中涉及的 API 函数
- css 百分比 怎么固定正方形_css样式写出三角形,宽高自适应的正方形,扇形!...