【sgAutocomplete】自定义组件:基于elementUI的el-autocomplete组件开发的自动补全下拉框组件(带输入建议的自动补全输入框)

d4f50ad8f5e54f549e447d0a0a6c694f.gif

特性:

1、支持本地保存选中过的记录

2、支持动态接口获取匹配下拉框内容

3、可以指定对应的显示label和字段组件key

4、自动生成速记符字段(包含声母和全拼两种类型),增强搜索匹配效率

sgAutocomplete源码

<template><!-- 基于elementUIel-autocomplete组件开发的自动补全下拉框组件 --><el-autocomplete:class="$options.name"style="width: 100%"ref="autocomplete":popper-class="'sgAutocomplete-el-autocomplete'"v-model="inputSearchValue":placeholder="placeholder || `输入关键词…`":value-key="valueKey || `label`":fetch-suggestions="fetchSuggestions":hide-loading="false"@focus="$refs.autocomplete.$el.querySelector('input').select()"@select="selectSuggestionsItem"@clear="focusAutocomplete":debounce="0"clearable><template slot-scope="{ item }"><div><i v-if="item.isHistory" class="history-icon el-icon-time" /><span class="label">{{ item[labelKey || `label`] }}</span></div></template><!-- 搜索按钮1 --><i class="el-icon-search el-input__icon" slot="suffix" v-if="showSearchButton == 1" /><!-- 删除历史记录按钮 --><i:title="clearHistoryTitle || `删除历史记录`"class="el-icon-delete el-input__icon clearHistory"slot="suffix"v-if="showHistoryBtn"@click="clearHistory"/><!-- 搜索按钮2 --><el-buttonslot="append"icon="el-icon-search"@click="focusAutocomplete"v-if="showSearchButton == 2"></el-button></el-autocomplete>
</template><script>
import pinyin from "@/js/pinyin";
export default {name: "sgAutocomplete",components: {},data() {return {inputSearchValue: null,historyListLocalStorageName: null, //保存到本地记录的localStorage KeysearchItems: [],showHistoryBtn: false,};},props: ["data", //可选项数组(必选参数)"value","valueKey", //获取值"labelKey", //显示值"placeholder","clearHistoryTitle", //删除历史记录按钮提示"filterKeys", //匹配搜索的字段(数组)不传此参数默认就用labelKey"showHistory", //显示历史选择记录"showSearchButton", //显示搜索按钮(样式:1 是在输入框里面的icon,2 是在输入框后面的按钮)"autofocus",],watch: {data: {handler(newValue, oldValue) {if (newValue && Object.keys(newValue).length) {this.searchItems = JSON.parse(JSON.stringify(newValue));this.searchItems.forEach((v) => {v.SJF = pinyin.getCamelChars(v[this.labelKey || "label"]); //速记符(声母)v.SJF_full = pinyin.getFullChars(v[this.labelKey || "label"]); //速记符(全拼)});}},deep: true, //深度监听immediate: true, //立即执行},value: {handler(newValue, oldValue) {this.inputSearchValue = newValue;},deep: true, //深度监听immediate: true, //立即执行},inputSearchValue: {handler(newValue, oldValue) {this.$emit(`input`, newValue);},deep: true, //深度监听immediate: true, //立即执行},showHistory: {handler(newValue, oldValue) {this.historyListLocalStorageName = newValue;},deep: true, //深度监听immediate: true, //立即执行},},mounted() {(this.autofocus === "" || this.autofocus) && this.focusAutocomplete(); //默认聚焦},methods: {focusAutocomplete(d) {this.$nextTick(() => {this.$refs.autocomplete.focus();this.$refs.autocomplete.activated = true; //这句话是重点});},// 搜索下拉框fetchSuggestions(queryString, callback) {if (queryString) {queryString = queryString.toString().trim();let r = this.searchItems.filter((v, i, ar) => {let filterKeys = this.filterKeys || [this.labelKey];filterKeys.push("SJF", "SJF_full"); //自动匹配声母、全屏组合return filterKeys.some((filterKey) =>v[filterKey].toLocaleLowerCase().includes(queryString.toLocaleLowerCase()));});this.showHistoryBtn = false;callback(r);} else {let historys = this.getHistorys();historys.forEach((v) => (v.isHistory = true)); //标识是历史记录this.showHistoryBtn = historys.length > 0;callback(historys);}},selectSuggestionsItem(d) {let historys = this.getHistorys();if (historys.length) {let k = this.valueKey || this.labelKey || "label";let has = historys.some((v) => v[k] == d[k]);has || historys.unshift(d);localStorage[this.historyListLocalStorageName] = JSON.stringify(historys);} else {localStorage[this.historyListLocalStorageName] = JSON.stringify([d]);}this.$emit(`change`, d);},getHistorys() {let historys = localStorage[this.historyListLocalStorageName];return JSON.parse(historys || "[]");},clearHistory(d) {delete localStorage[this.historyListLocalStorageName];this.showHistoryBtn = false;this.focusAutocomplete();},},
};
</script><style lang="scss" scoped>
.sgAutocomplete {.clearHistory {cursor: pointer;&:hover {color: #409eff;}}
}
</style>

里面用到的pinyin.js在这篇文章里面JS自动生成速记符、拼音简写/拼音的声母(例如:“你挚爱的强哥”转换为“NZADQG”)。提取首字母,返回大写形式;提取拼音, 返回首字母大写形式(全拼)。_你挚爱的强哥的博客-CSDN博客文章浏览阅读2.7k次。需要引用以下pinyin.js文件。https://blog.csdn.net/qq_37860634/article/details/130765296

用例

<template><div><sgAutocompleteautofocusv-model="sgAutocompleteValue":data="data":placeholder="`输入搜索关键词...`":valueKey="`value`":labelKey="`label`"showHistory="localStorageHistoryName"showSearchButton="2"@change="changeSgAutocomplete"/><p style="margin-top: 20px">选择的数据:{{ sgAutocompleteValue }}</p><pstyle="margin-top: 20px;word-wrap: break-word;word-break: break-all;white-space: break-spaces;"><span>选择的对象:</span>{{ sgAutocompleteObject ? JSON.stringify(sgAutocompleteObject, null, 2) : "" }}</p></div>
</template>
<script>
import sgAutocomplete from "@/vue/components/admin/sgAutocomplete";
export default {components: { sgAutocomplete },data() {return {sgAutocompleteValue: null,sgAutocompleteObject: null,data: [],//模拟数据1dataA: [{ value: "1", label: "A显示文本1" },{ value: "2", label: "A显示文本2" },{ value: "3", label: "A显示文本3" },{ value: "4", label: "A显示文本4" },{ value: "5", label: "A显示文本5" },],//模拟数据2dataB: [{ value: "1", label: "B显示文本1" },{ value: "2", label: "B显示文本2" },{ value: "3", label: "B显示文本3" },{ value: "4", label: "B显示文本4" },{ value: "5", label: "B显示文本5" },],};},watch: {// 模拟动态更新筛选项sgAutocompleteValue: {handler(newValue, oldValue) {if (newValue && Object.keys(newValue).length) {switch (newValue.toLocaleLowerCase()) {case "a":this.data = this.dataA;break;case "b":this.data = this.dataB;break;}}},},},methods: {changeSgAutocomplete(d) {this.sgAutocompleteObject = d;},},
};
</script>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/221667.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络:物理层(奈氏准则和香农定理,含例题)

带你速通计算机网络期末 文章目录 一、码元和带宽 1、什么是码元 2、数字通信系统数据传输速率的两种表示方法 2.1、码元传输速率 2.2、信息传输速率 3、例题 3.1、例题1 3.2、例题2 4、带宽 二、奈氏准则&#xff08;奈奎斯特定理&#xff09; 1、奈氏准则简介 2、…

如何选择适合的公共 DNS

中国国内一些公共 DNS 服务 腾讯 DNSPod Anycast&#xff1a;上海、天津、广州、香港 DNS 出口&#xff1a;上述四点 TCP 查询&#xff1a;不支持 DoT、DoH&#xff1a;支持。域名 dns.pub 和 doh.pub&#xff0c;同时支持 DoH 和 DoT ECS&#xff1a;不完整支持 https://www.…

【python并发任务的几种方式】

文章目录 1 Process:2 Thread:3 ThreadPoolExecutor:4 各种方式的优缺点&#xff1a;5 线程与进程的结束方式5.1 线程结束的几种方式5.2 进程的结束方式 6 应用场景效率对比 在Python中&#xff0c;有几种方法可以处理并行执行任务。其中&#xff0c;Process、Thread和ThreadPo…

SQL进阶理论篇(三):什么是索引

文章目录 简介索引是万能的吗索引的种类有哪些&#xff1f;普通/唯一/主键/全文索引聚集索引与非聚集索引单一索引与联合索引 总结参考文献 简介 索引在SQL优化中占了很大的比重&#xff0c;甚至可以说&#xff0c;对SQL的优化&#xff0c;其实就是对索引的优化。 但是索引并…

《深入理解 Android ART 虚拟机》笔记

Dex文件格式、指令码 一个Class文件对应一个Java源码文件&#xff0c;而一个Dex文件可对应多个Java源码文件。开发者开发一个Java模块&#xff08;不管是Jar包还是Apk&#xff09;时&#xff1a; 在PC平台上&#xff0c;该模块包含的每一个Java源码文件都会对应生成一个同文件…

Dubbo连接协议配置基础V2.0.0

Dubbo连接所使用的协议 一、dubbo://协议 1.1、使用场景: Dubbo 缺省协议采用单一长连接和 NIO 异步通讯&#xff0c;适合于小数据量大并发的服务调用&#xff0c;以及服务消费者机器数远大于服务提供者机器数的情况。反之&#xff0c;Dubbo 缺省协议不适合传送大数据量的服…

Flink Window中典型的增量聚合函数(ReduceFunction / AggregateFunction)

一、什么是增量聚合函数 在Flink Window中定义了窗口分配器&#xff0c;我们只是知道了数据属于哪个窗口&#xff0c;可以将数据收集起来了&#xff1b;至于收集起来到底要做什么&#xff0c;其实还完全没有头绪&#xff0c;这也就是窗口函数所需要做的事情。所以在窗口分配器…

计算机组成原理-ATT格式vsIntel格式

文章目录 AT&T格式 vs lntel格式 x86汇编语言是lntel格式&#xff0c;还有一种汇编语言格式是AT&T AT&T格式 vs lntel格式 lntel格式中取主存地址内容未指明长度默认为32位&#xff0c;对应下图中第四行右边的指令 百分号 美元符号 小括号 可用于计算机结构体数组…

竞赛保研 python+opencv+机器学习车牌识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于机器学习的车牌识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;3分 该项目较为新颖&#xff0c;适…

Amazon Q:对话智能赋能企业发展

授权说明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 。 在最近举办的亚马逊云科技大会上&#xff0c;引人瞩目的消息是A…

西米支付:微信支付发布了一则重大公告!从2024年1月8日开始执行。

最近&#xff0c;微信支付发布通告表示对服务商合作协议和规则进行了修订。这次修订进一步明确了收单外包服务机构的备案义务&#xff0c;并加强了对违约合作伙伴的处理措施。 修订后的协议将于2024年1月8日开始生效。 根据修订后的协议&#xff0c;服务商需在开始提供收单外包…

斑马zebra目标检测数据集VOC+YOLO格式2300张

斑马是由四百万年前的原马进化出来的&#xff0c;最早出现的斑马可能是细纹斑马。有关史前马科动物的化石现存于美国爱达荷州克文的克文化石床国家博物馆。斑马的史前马为“克文马”&#xff08;美洲斑马或者克文斑马&#xff09;&#xff0c;学名为“Equussimplicidens”&…

Llinux面试题2

请描述一下 chmod 命令。 答&#xff1a;chmod 命令用于修改文件或目录的权限。它可以添加或删除对文件的读、写和执行权限。 在 Linux 中&#xff0c;如何修改文件的权限&#xff1f; 答&#xff1a;可以使用“chmod”命令来修改文件的权限。例如&#xff0c;通过以下命令将文…

​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案

随着“第四次工业革命”的爆炸式发展&#xff0c;众多企业都将自己的业务与迅速发展的应用开发和网站建设领域高度绑定。而对于众多有上云需求的企业和个人用户来说&#xff0c;选择一款自己的服务器配置就成为了一项至关重要的任务。而随着需求端的不断扩大&#xff0c;云服务…

第二步:私有镜像仓库Harbor的使用

前序&#xff1a; &#x1f517;第一步&#xff1a;私有镜像仓库Harbor的安装部署 一、将容器打包为镜像&#xff0c;上传到Harbor 1、查看镜像 输入命令 docker images打印返回 REPOSITORY TAG IMAGE ID CREATED …

Nacos-NacosRule 负载均衡—设置集群使本地服务优先访问

userservice: ribbon: NFLoadBalancerRuleClassName: com.alibaba.cloud.nacos.ribbon.NacosRule # 负载均衡规则 NacosRule 权重计算方法 目录 一、介绍 二、示例&#xff08;案例截图&#xff09; 三、总结 一、介绍 NacosRule是AlibabaNacos自己实现的一个负载均衡策略&…

《教育信息化论坛》期刊杂志论文发表投稿

《教育信息化论坛》由中原大地传媒股份有限公司主管&#xff0c;河南电子音像出版社、文心出版社主办&#xff0c;我刊立足于教育信息化、教育现代化科研&#xff0c;重点介绍国内外信息化、现代化教学手段、教学方式、教学传播研究的新成果和新观点&#xff0c;推广成功的国内…

【嵌入式开发 Linux 常用命令系列 14 -- source hello.sh 和 ./hello.sh 的区别】

文章目录 source hello.sh 和 ./hello.sh 的区别source hello.sh./hello.sh使用场景 source hello.sh 和 ./hello.sh 的区别 问题背景&#xff1a; 创建了目录~/.local/bin 并将其在.bashrc文件中添加到path 中&#xff0c;export PATH$PATH:/home/sam/.local/bin。 在 ~/.loc…

KVO(键值观察)

KVO&#xff08;键值观察&#xff09;是Objective-C 对观察者设计模式的一种实现。 举个栗子&#xff1a;指定一个被观察对象(A类)&#xff0c;当被观察对象某个属性(A中的字符串name)发生更改时&#xff0c;对象&#xff08;B类&#xff09;会获得通知&#xff0c;并作出相应…

【Spring教程28】Spring框架实战:从零开始学习SpringMVC 之 请求与请求参数详解

目录 1 设置请求映射路径1.1 环境准备 1.2 问题分析1.3 设置映射路径 2 请求参数2.1 环境准备2.2 参数传递2.2.1 GET发送单个参数2.2.2 GET发送多个参数2.2.3 GET请求中文乱码2.2.4 POST发送参数2.2.5 POST请求中文乱码 欢迎大家回到《Java教程之Spring30天快速入门》&#xff…