使用字典树实现一个可以自动补全的输入框

在这里插入图片描述

说在前面

平时我们在终端输入命令的时候是不是都可以通过tab键来进行快速补全?那么有没有想过怎么去实现这个自动补全的功能呢?今天让我们一起来使用字典树实现一个可以自动补全的输入框。

效果展示

在这里插入图片描述

体验地址

http://jyeontu.xyz/jvuewheel/#/JAutoCompleteInputView

功能实现

一、字典树

字典树(Trie树)是一种多叉树结构,通常用于存储关联数组,其中键通常是字符串。字典树的每个节点都包含若干指向子节点的指针,以及表示一个字符的值。通过在树中沿着键的字符序列从根节点到叶节点的路径,字典树可以有效地支持诸如查找、插入和删除等操作。

字典树主要有以下几个特点和用途:

  1. 高效的字符串检索:字典树可以在O(m)的时间复杂度内完成对长度为m的字符串的检索操作,这比哈希表和二叉搜索树的检索效率更高。
  2. 前缀匹配:字典树可以快速查找具有相同前缀的字符串集合,例如自动补全、拼写检查等应用。
  3. 字典、单词和文本处理:字典树可以用于构建字典、实现单词频率统计、前缀匹配和模式匹配等文本处理任务。
  4. 路由协议查找:在计算机网络领域,字典树可以用于路由表的快速查找,以确定数据包的下一跳路径。

总之,字典树以其高效的字符串检索和前缀匹配能力,在搜索引擎、拼写检查、路由协议查找等领域有着广泛的应用。希望这些信息能够帮助你理解字典树的概念和用途

1、实现

字典树的实现我前面有写过一篇相关的博客进行了详细的介绍,有兴趣的可以看下:《JavaScript实现前缀树》,这里就不重复介绍了。

2、字典树库

之前我自己也封装了一个数据结构相关库,目前已实现:堆、优先队列、字典树、LFU缓存、链表,这里可以直接引入该库的字典树来使用。

(1)安装
npm install @jyeontu/structure-jyeontu
(2)使用
import { TrieTree } from "@jyeontu/structure-jyeontu";
this.trieTree = new TrieTree(this.wordList);

1699980595719.jpg

(3)源码

源码地址:https://gitee.com/zheng_yongtao/structure-jyeontu/tree/master/src/TrieTree

二、自动补全功能

我们希望的效果是:初始化一个字典数组,后面输入框输入字符时,会检测出字典中以当前输入字符为前缀的所有字符作为备选列表展示在输入框下方,按tab键会选择备选列表中最接近当前字符的字符进行自动补全。

比如我们现在有这样一个字典数组:[ "app", "apple", "blue", "banana", "苹果", "香蕉", "JYeontu", "jyeontu", "自动补全", "hello", "hello world", "你好世界", "你好" ],输入框输入的时候,备选列表会显示你好、你好世界,按下tab键后会将你好直接补全到输入框中,也可以直接点击备选列表的文字选择补全,比如点击你好世界后会将你好世界直接补全到输入框中。

image.png

1、初始化字典数

首先我们应该要先将传入的字典数组转为字典树。

import { TrieTree } from "@jyeontu/structure-jyeontu";
this.trieTree = new TrieTree(this.wordList.sort((a, b) => a.length - b.length)
);
2、输入框
<inputclass="j-auto-complete-input"@keydown.tab.prevent="handleTabKey"@input="handleInput"v-model="inputVal"
/>
(1)输入字符动态更新备选列表

我们只需监听input框的input事件,在触发的时候更新备选列表即可。

handleInput() {this.selectList = this.trieTree.getWordsByPrefix(this.inputVal);this.$emit("input", this.inputVal);
},
(2)按下tab键自动补全

使用@keydown.tab指令来监听Tab键的按下事件,并调用handleTabKey方法进行相应的操作,我们不希望按下tab键后失去聚焦,所有要阻止默认行为,即使用@keydown.tab.prevent

handleTabKey() {if (this.selectList.length) this.inputVal = this.selectList[0];this.handleInput();
},
3、备选列表

我们希望点击备选列表时也可以进行快速补全,监听一下列表的点击事件即可。

<div class="j-auto-complete-panel" v-if="showChooseList"><divclass="j-auto-complete-panel-item"v-for="(text, textInd) in selectList":key="'JAutoCompleteInputItem' + textInd"@click="selectText(text)">{{ text }}</div>
</div>
selectText(text) {this.inputVal = text;this.handleInput();
}

源码

该组件库源码已开源,有兴趣的可以到gitee仓库查看,欢迎watch、star、fork,有什么其他想要实现的组件也可以提个issue或者在公众号给我留言。

一、gitee

gitee 地址:https://gitee.com/zheng_yongtao/jyeontu-component-warehouse.git

二、公众号

关注公众号『前端也能这么有趣』发送 组件库即可获取源码。

三、组件体验及文档地址

目前该组件库已经发布到npm上,可以直接通过npm install,具体使用方法可以查看以下文档:

jvuewheel:http://jyeontu.xyz/jvuewheel/#/installView

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

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

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

相关文章

百度文心一言

1分钟了解一言是谁&#xff1f; 一句话介绍【文心一言】 我是百度研发的人工智能模型&#xff0c;任何人都可以通过输入【指令】和我进行互动&#xff0c;对我提出问题或要求&#xff0c;我能高效地帮助你们获取信息、知识和灵感哦 什么是指令&#xff1f;我该怎么和你互动&am…

2023-2024-2 高级语言程序设计-二维数组

7-1 矩阵运算 给定一个nn的方阵&#xff0c;本题要求计算该矩阵除副对角线、最后一列和最后一行以外的所有元素之和。副对角线为从矩阵的右上角至左下角的连线。 输入格式: 输入第一行给出正整数n&#xff08;1<n≤10&#xff09;&#xff1b;随后n行&#xff0c;每行给出…

U-Mail海外邮件中继帮您解决企业邮件退信难题

过去一年&#xff0c;国内外形势严峻复杂&#xff0c;但中国外贸顶住压力、爬坡过坎&#xff0c;进出口规模冲破40万亿元大关&#xff0c;高达42万亿元人民币&#xff0c;中国连续6年位居货物贸易第一大国。随着我国疫情防控措进入新阶段&#xff0c;“拼经济”正在成为各地的一…

oracle-buffer cache

段&#xff0c;区&#xff0c;块。 每当新建一个表&#xff0c;数据库会相应创建一个段。然后给这个段分配一个区。 一个区包含多个块。 区是oracle给段分配空间的最小单位。 块是oracle i\o的最小单位。 原则上&#xff0c;一个块包含多行数据。 dbf文件会被划分成一个一个…

Transmit :macOS 好用的 Ftp/SFtp 工具

Transmit 是一种功能强大的 FTP/SFTP/WebDAV 客户端软件&#xff0c;是一个 Mac OS X 平台上设计的文件传输软件。它由 Panic&#xff08;一家以软件工具为主的公司&#xff09;开发和维护&#xff0c;是一款非常受欢迎且易于使用的软件&#xff0c;而且被广泛认为是 Mac OS X …

详解 KEIL C51 软件的使用·建立工程

单片机要运行,就必须将程序代码下载到程序存储器内部,但是在写进单片机之前要先将你写 的程序转换成*.hex 或*.bin 的文件.不同系列的单片机都有不同的软件对其进行编绎,而 keil Cx51 是德国开发的一个专为 51 系列单片机提供的软件开发平台,基本上现在的所有 51 系列内核的单片…

记一次 .NET 某券商论坛系统 卡死分析

一&#xff1a;背景 1. 讲故事 前几个月有位朋友找到我&#xff0c;说他们的的web程序没有响应了&#xff0c;而且监控发现线程数特别高&#xff0c;内存也特别大&#xff0c;让我帮忙看一下怎么回事&#xff0c;现在回过头来几经波折&#xff0c;回味价值太浓了。 二&#…

【Java 进阶篇】JQuery 案例:全选全不选,为选择添彩

在前端的舞台上&#xff0c;用户交互是一场精彩的表演&#xff0c;而全选全不选的功能则是其中一段引人入胜的剧情。通过巧妙运用 JQuery&#xff0c;我们可以为用户提供便捷的全选和全不选操作&#xff0c;让页面更富交互性。本篇博客将深入探讨 JQuery 中全选全不选的实现原理…

2023湖南省赛

​​​​​​连接 目录 A:开开心心233 B:Square Game C:室温超导 F:necklace K:tourist 补题中&#xff0c;会给出大部分代码 A:开开心心233 签到题 &#xff0c;无论二分还是解方程还是直接for循环枚举都能直接通过啦 signed main() {ios_base::sync_with_stdio(0); c…

Hadoop3.3.4分布式安装

安装前提&#xff1a;已经配置好java环境&#xff0c;所有机器之间ssh的免密登录。 注意&#xff1a;下文中的flinkv1、flinkv2、flinkv3是三台服务器的别名 1.集群部署规划 注意&#xff1a;NameNode和SecondaryNameNode不要安装在同一台服务器 注意&#xff1a;ResourceMan…

【LLM】0x00 大模型简介

0x00 大模型简介 个人问题学习笔记大模型简介LLM 的能力&#xff1a;LLM 的特点&#xff1a; LangChain 简介LangChain 核心组件 小结参考资料 个人问题 1、大模型是什么&#xff1f; 2、ChatGPT 在大模型里是什么&#xff1f; 3、大模型怎么用&#xff1f; 带着问题去学习&a…

2023年03月 Python(五级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 已知一个列表lst = [2,3,4,5,6],lst.append(20),print(lst)的结果是?( )(2分) A.[10,2,3,4,5,6,20] B.[20,2,10,3,4,5,6] C.[2,3,4,5,6,20] D.[2,3,4,5,6,10,20] 答案:C 第2…