el-autocomplete组件 实现通用文本框历史数据显示

HTML autocomplete 属性可用于以文本以提供填写表单字段值的自动帮助,简单说说就是可以记忆历史数据并显示出来,可以提高输入效率。

但是HTML autocomplete 属性需要下面的条件,在element ui的开发中非常不方便,必须使用form同步提交,而VUE中现代网页都使用axios来异步提交。

  1. 具有 name 和/或 id 属性
  2. 成为 <form>  的后代
  3. 具有 submit 按钮的表单

于是就用el-autocomplete组件+localstorage实现了h5里面的自动完成功能,自动完成的项目数不限,每个项目能够记忆5个(可修改)最新的数据,

localstorage的数据格式

key:

Autocomplete:/#/media/W002024:SiteOwnerChange

value:

{"selectForm.URL":[{"value":"fggfhfgh"},{"value":"ssss"},{"value":"aa"}]}

核心代码

class Autocompletex {
  parent
  autocomplete
  key
  constructor(parent) {
    this.
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值