ElementUI 组件 el-autocomplete 实现文本框历史查询建议

前言

需求：输入开票主体：该操作框为下拉输入框，用户可选择历史充值过的开票主体，也可以重新输入新的开票主体

此处根据需求实现“开票主体历史搜索建议”功能，按照需求的下拉框 el-select 不完全符合产品设计；
这里适合产品的是支持下拉选择历史选项的文本输入框；支持输入新的数据，或者选择之前有输入过的历史数据，新数据会放入存储历史集合，并在集合大小超出设定最大值后，按先进先出原则，清除历史记录。相对下拉组件，带输入建议的文本框组件 el-autocomplete 符合此需求。

功能实现

Vue 页面关键代码
注意要引入组件 el-autocomplete 才能使用。

          <el-form ref="protocol_form" :model="protocolInfo"><el-form-item label="请选择支付方式：" class="labelClass" required><el-form-grid style="float: left;"><template><el-radio-group v-model="protocolInfo.payWay"><el-radio :label="0"> <img src="./img/aliPay2.png"/> </el-radio><el-radio :label="1"> <img src="./img/card.png"/> </el-radio></el-radio-group></template></el-form-grid></el-form-item><el-form-item label="请输入开票主体：" class="labelClass" required><el-form-grid style="float: left;"><el-autocompletev-model="protocolInfo.invoiceAccount":fetch-suggestions="querySearch"placeholder="请输入内容"/></el-form-grid></el-form-item><el-form-item style="float: left"><el-form-grid><template><el-checkbox v-model="protocolInfo.know"></el-checkbox>本人已知悉：付款账号的户名需与开票抬头（即合同主体）保持一致，否则会影响发票索取。</template></el-form-grid></el-form-item></el-form>

Js 文件关键代码
Js 存储查询记录及渲染历史记录；文本框获取鼠标焦点事件，fetch-suggestions 方法返回输入建议，新的输入建议可以通过 localStorage 放入前端本地存储中，最多保留 6 条开票主体记录；支持输入新的开票主体，点击同意按钮时触发文本存储校验，新的文本会放入历史记录集合，并在超出 6 条记录时，清除第一条记录。

export default {data: function () {return {// 协议信息protocolInfo: {payWay: 0,invoiceAccount: '',know: false,}}},methods: {// 点击同意agreeProtocol: function () {this.handleSearchHistory()},// 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它querySearch (queryString, cb) {var invoiceAccountHistory = this.getInvoiceAccountHistory()var results = queryString ? invoiceAccountHistory.filter(this.createFilter(queryString)) : invoiceAccountHistorycb(results)},createFilter (queryString) {return (invoiceAccount) => {return (invoiceAccount.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)}},// 存放查询记录handleSearchHistory () {let searchWordArray = localStorage.getItem('searchWord')searchWordArray = searchWordArray.split(',')if (searchWordArray.indexOf(this.protocolInfo.invoiceAccount) === -1) {searchWordArray.unshift(this.protocolInfo.invoiceAccount)}if (searchWordArray.length > 6) {searchWordArray.pop()}localStorage.setItem('searchWord', searchWordArray)},// 渲染历史记录getInvoiceAccountHistory () {let searchWordArray = localStorage.getItem('searchWord')searchWordArray = searchWordArray.split(',')let invoiceAccountHistory = []for (let i=0; i < searchWordArray.length; i++) {let item = {"value": searchWordArray[i],"label": searchWordArray[i]}invoiceAccountHistory.push(item)}return invoiceAccountHistory}}
}

页面效果

Power By niaonao, The End

ElementUI 组件 el-autocomplete 实现文本框历史查询建议相关推荐

Access：如何接收文本框作为查询条件，并实时刷新查询
今天,想设计一个窗体,窗体中有个文本框,然后按文本框的条件实时更新查询清单. 在上图输入时间查询结果就实时刷新,这个不是在窗体中刷新,而是直接刷新Access默认的查询. 方法一: 代码部分: 1, ...
vue--echarts 图标库、excel导出、面包屑组件、富文本框、地图、前端使用代理访问、监控生产环境or开发环境
目录一.echarts 图标库 1.echarts的基础 2.项目中的使用二.execl导出三.面包屑组件四.富文本框五.地图六.vite 构建配置七.后端未开跨域资源共享,前端使用代理 ...
android 代码控件框高,Android控件_TextView(显示文本框控件)
一.TextView控件的常用属性 1.android:id--控件的id 2.android:layout_width--设置控件的宽度 wrap_content(包裹实际文本内容) fill_pa ...
微信小程序开发文本框无法输入文字
杀程序员祭天在小程序开发组件中使用了文本框组件,鼠标点击无法获取焦点,输不了内容(这里移动端事实上是可以输入的,只是pc端的模拟器输入不了),wxml和js代码如下: <input place ...
ElementUI富文本框组件wangEditor实现
富文本框wangEditor 需求:用户要求使用富文本框上传图片.文章. 需求分析:wangeditor实现需求,几行代码即可创建一个编辑器. 解决过程: 安装 npm i wangeditor -- ...
Python批量提取Excel文件中文本框组件里的文本
开学第一课:拜托,一定不要这样问Python问题中国大学MOOC"Python程序设计基础"免费学习地址 2020年秋季学期Python教材推荐与选用参考推荐图书: <P ...
6、Java Swing JTextField：单行文本框组件
Swing 中使用 JTextField 类实现一个单行文本框,它允许用户输入单行的文本信息. JTextField类的常用构造方法如下: JTextField()----创建一个默认的文本框. JT ...
[原创]Flex文本框自动提示(AutoSuggest)、自动完成(AutoComplete)
做一个小程序要用到Flex文本框自动提示的功能,因为时间不是很紧,所以决定自己动手做这个小组件,花了一个晚上的时间终于完成了.贴出来与大家分享一下. 虽然网上有不少这样的组件,但自己动手做可以锻炼下思 ...
input的属性AutoComplete——关闭浏览器文本框自动提示
1. 有时候我们并不需要AutoComplete,例如需要用户自己再次输入而非自动完成.只要将所在表单元素的autocomplete属性设置为off即可. <form> 请双击文本框 &l ...

ElementUI 组件 el-autocomplete 实现文本框历史查询建议

前言

功能实现

ElementUI 组件 el-autocomplete 实现文本框历史查询建议相关推荐

最新文章

热门文章