【JavaScript】JS实用案例分享：输入智能提示 打字机输出效果_js输入框旁边提示信息(1)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

👉 你的一键三连是我更新的最大动力❤️！
🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，点击跳转🍬

---

文章目录

• 前言
• 1、输入智能提示
• • 效果演示
    • 案例需求
    • JavaScript实现
• 2、打字机输出
• • 效果演示
    • 案例需求
    • JavaScript实现
• 结语

前言

最近博主一直在牛客网刷题巩固基础知识，牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能，还具有非常强大的AI模拟面试功能，简直是求职者的福音！

牛客网里的题库非常全面的，无论你是前端还是后端，是想要备考还是准备面试又或者是想要提高自己，你都能在牛客网上找到适合自己的题，赶快点击链接去注册登录吧：点我进入牛客网

牛客网	牛客网
在这里插入图片描述	在这里插入图片描述

本篇文章所有示例来自于牛客网题库/在线编程/JS篇，这些都是前端开发中常用的功能，借此记录一下刷题过程，巩固基础！

1、输入智能提示

效果演示

有以下HTML和CSS：

HTML结构

<div class="search">
    <div>
        <!-- 调用suggest函数 -->
    	<input type="text" class="js-input"
 oninput="suggest(['河南加入下雪群聊','河南疫情','河南大学','河南疫情最新消息','河南地图','河南卫视重阳奇妙游2022节目单','河南天气预报','河南省高校学生资助在线'])">
    </div>
    <div class="js-suggest">
        <ul></ul>
    </div>
</div>

CSS样式

.search {
   position: relative;
}

.js-input {
   width: 450px;
   height: 22px;
   line-height: 22px;
   font-size: 16px;
   padding: 8px;
   border: 1px solid #cccccc;
   outline: none;
}

.js-suggest {
   width: 466px;
   font-size: 14px;
   border: 1px solid #cccccc;
   background: #ffffff;
   position: absolute;
   left: 0;
   top: 39px;
}

.js-suggest.hide {
   display: none;
}

.js-suggest ul {
   display: block;
   list-style: none;
   padding: 0;
   margin: 0;
}

.js-suggest ul li {
   color: #000;
   font: 14px arial;
   line-height: 25px;
   padding: 0 8px;
   position: relative;
   cursor: default;
}

.js-suggest ul li:hover {
   background: #f0f0f0;
}

案例需求

1. 当输入框的值发生变化时，调用suggest函数，用于显示/隐藏智能提示数据，参数items为一个字符串数组。
2. 当items中的字符串和输入框的值匹配时，将匹配的数据依次渲染在ul下的li节点中，并显示.js-suggest节点，否则移除ul下的所有li节点，并隐藏.js-suggest节点
3. 输入框的值需要移除两侧空白再进行匹配
4. 输入框的值为空时，按照全部不匹配处理
5. 字符串使用模糊匹配，比如"北大"能匹配"北大"和"北京大学"，但不能匹配"大北京"，即按照 /北.*?大.*?/ 这个正则进行匹配
6. 通过在.js-suggest节点上添加/移除 hide 这个class来控制该节点的隐藏/显示

JavaScript实现

function suggest(items) {
    const val = document.getElementsByClassName('js-input')[0].value.trim()
    const suggest = document.getElementsByClassName('js-suggest')[0]

    // 创建输入内容的正表达式：使用split将字符串转换成数组 -> 使用map映射生成新数组 -> 使用join将数组连接成字符串
    const valReg = new RegExp(val.split('').map(v => special(v)).join(''))

    // 通过filter方法过滤出items中符合的项：符合的条件是用户输入内容不为空（val != ''）并且与用户输入的内容匹配
    const item = items.filter(i => val != '' && valReg.test(i))

    // 如果item.length不为0，代表有匹配的数据，则执行：
    // suggest.classList['remove']('hide')相当于suggest.classList.remove('hide') 效果是删除hide这个class
    suggest.classList[item.length ? 'remove' : 'add']('hide')

    // 渲染列表
    suggest.children[0].innerHTML = item.map(i => `<li>${i}</li>`).join('')
}

// 对特殊字符的处理
function special(val) {
    // 如果val是()[].+/?\*这类的特殊字符，则在它前面加上转义字符：\
    // 为什么是\\${val}，两个\？因为在模板字符串``中\也需要使用\转义
    return `${'()[].+/?\*'.indexOf(val) === -1 ? val : `\\${val}`}.\*?`
}

这个案例中需要注意的地方就是不要忘记对特殊字符的转义（实现special函数）。

知识点：

• RegExp(正则表达式)
• split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
• map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
• join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
• filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
• test() 方法执行一个检索，用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。
• Element.classList 是一个只读属性，返回一个元素 class 属性的动态 DOMTokenList集合。这可以用于操作 class 集合。
• indexOf() 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。

2、打字机输出

效果演示

有以下HTML和CSS：

HTML结构

<div class="content">
    <span class="word color23">h</span>
    <span class="word color22">e</span>
    <span class="word color4">l</span>
    <span class="word color24">l</span>
    <span class="word color17">o</span>
    <span class="word color2">&nbsp;</span>
    <span class="word color9">w</span>
    <span class="word color3">o</span>
    <span class="word color1">r</span>
    <span class="word color23">l</span>
    <span class="word color15">d</span>
    <br>
    <span class="word color15">你</span>
    <span class="word color13">好</span>
    <span class="word color16">世</span>
    <span class="word color19">界</span>
    <span class="blink" id="jsBlink">|</span>
</div>

CSS样式

html,
body {
    margin: 0;
}

.color1 {
    color: #E60012;
}

.color2 {
    color: #EB6100;
}

.color3 {
    color: #F39800;
}

.color4 {
    color: #FCC800;
}

.color5 {
    color: #FFF100;
}

.color6 {
    color: #CFDB00;
}

.color7 {
    color: #8FC31F;
}

.color8 {
    color: #22AC38;
}

.color9 {
    color: #009944;
}

.color10 {
    color: #009B6B;
}

.color11 {
    color: #009E96;
}

.color12 {
    color: #00A0C1;
}

.color13 {
    color: #00A0E9;
}

.color14 {
    color: #0086D1;
}

.color15 {
    color: #0068B7;


![img](https://img-blog.csdnimg.cn/img_convert/e1e626b4a75911b534c9847b504f6b13.png)
![img](https://img-blog.csdnimg.cn/img_convert/8866b9d0c238f777ea90b61738025ae6.png)
![img](https://img-blog.csdnimg.cn/img_convert/1e53a81ecfda4f685fa472208b39c1a2.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

3rxjYL-1714989093342)]
[外链图片转存中...(img-VZtor329-1714989093343)]
[外链图片转存中...(img-ucKH5uiB-1714989093343)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**