input的autocomplete效果 ---又是一道腾讯编程题

最新推荐文章于 2026-06-18 03:36:59 发布

原创

最新推荐文章于 2026-06-18 03:36:59 发布 · 2.7k 阅读

标签

#输入框 #自动补全 #autocomplete #腾讯面试 #javascript

收录于

这篇博客介绍了一道腾讯编程题，涉及到在输入框中实现自动补全功能。作者通过HTML、CSS和JavaScript代码展示了如何根据数组arr查询匹配词汇并显示autocomplete效果。文章还提及，对于大量数据，可以使用搜索算法如二分查找，或借助后端接口返回结果。

- - 题目
  - 效果
  - 代码
    - html
    - css
    - js
  - 思考

题目

页面内有一个 input 输入框，实现在数组 arr 查询命中词并和 autocomplete 效果。

效果

忽略圆圈，这是quickTime录屏的side effect。。。
这里写图片描述

代码

html

 <div id="div1">
    <input type="text" id="input" placeholder="有autocomplete的输入框"/>
    <ul id="ul">
    </ul>
  </div>

css

*{
    margin: 0;
    padding:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

十方魔

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jquery 实现autocomplete效果

12-05

html input autocomplete效果非常的不错，打开即可使用。有完整的实例供参考。

3 条评论您还未登录，请先登录后发表或查看评论

Jquery UI简单应用——自动完成（Autocomplete）实现类似百度输入提醒效果

Xuesong_2015的博客

12-15

715

前言：最近做的一个项目，需要做一个类似百度输入框自动提醒的效果，在几经研究之后，我决定使用Jquery UI中的Autocomplete来实现这一功能。先看效果参考地址:demo 参考地址:详解API 下载jquery UI控件下载地址：http://jqueryui.com/download/ 前端页面代码<input type="text" id="parameter" place

解决浏览器自动填充用户名密码问题

qq_43576662的博客

11-10

2522

我使用的是ant design Vue 的a-input组件，页面首次加载会自动填充用户名和密码框，有时不太方便添加autocomplete="new-password"就解决了这个问题 <a-form-item label="用户账号"> <a-input autocomplete="new-password" v-decorator="[ 'username']"/> </a-form-item> <a-form-item label="登录密码">

Grafana邮件告警模板改造实战：从9.1到10.4.1的升级避坑指南

weixin_30955617的博客

03-24

333

本文详细介绍了Grafana从9.1升级到10.4.1过程中邮件告警模板的改造实战，包括模板语法迁移、阈值配置适配和邮件样式优化。重点解析了新版Grafana在告警模块的核心变更点，如模板语法变化、配置逻辑调整和数据获取方式更新，并提供了有效的解决方案和调试技巧，帮助运维人员顺利完成升级。

解决input 框自动填充、保留

qq_51622532的博客

02-24

617

解决input 框自动填充、保留

Antd中表单的Input组件输入框清除历史输入记录

m0_68541333的博客

08-09

1577

利用input的属性。

【无标题】

Xiaoyinghuan的博客

04-14

636

今天让我们一起来复盘一下最近bug解决的心得此处来一点掌声 ! ) 1.校正a-input自动清除匹配缓存数据问题使用autocomplete=“off” 2.a-select 滑动时下拉框会跑这个鬼问题刚被测试发现的时候吓到我了文档打开一看 so :getPopupContainer=“triggerNode => triggerNode.parentNode.parentNode” 解决 3.测试反馈input设置时间要禁止输入. 其他字符原生的input百度到了但是a-input 没找

前端都应该阅读这些文章

MMryyy的博客

08-07

427

一个合格(优秀)的前端都应该阅读这些文章：https://juejin.im/post/5d387f696fb9a07eeb13ea60 腾讯前端面试篇（一） https://juejin.im/post/5c19c1b6e51d451d1e06c163

html学习笔记

weixin_30462049的博客

08-07

278

浏览器内核　　1、浏览器内核：渲染引擎（取得内容、整理信息、计算网页显示方式）+js引擎（实现动态效果）。内核主要指渲染引擎。　　2、主要浏览器及其内核　　（1）trident：国内大多双核浏览器（ie、360急速、百度、猎豹安全、腾讯TT、Avant、世界之窗）的内核，美其名曰"兼容模式"。　　（2）edgeHTmL：IE内核（windows10之后，IE将其内置浏览器...

AI对话数据留痕真相：你的每句话都可能被永久记录

cuanmo8775的博客

06-15

541

AI对话并非私密聊天，而是一次结构化数据生成过程。从输入文本到模型响应，全程涉及前端缓存、服务端推理日志与潜在训练语料入库，形成可追溯、可检索、难清除的数据流。其底层原理基于分布式日志系统、权限分级访问机制及模糊化‘匿名处理’实践，技术价值在于保障系统稳定性与服务迭代，但客观上带来隐私暴露风险。典型应用场景包括用户日常咨询、创作者内容辅助、企业内部知识管理等，而高危行为如输入PII组合、金融细节或商业原型，极易触发跨系统关联识别。本文聚焦AI对话中的数据留存机制与实操防护逻辑。

AIGC 创意猎人（三十一）

最新发布

龙哥盟

06-18

233

天气：{{String1[0].condition}}, 最高温：{{String1[0].temp_high}},最低温：{{String1[0].temp_low}},风向：{{String1[0].wind_dir_day}},风力:{{String1[0].wind_level_day}},湿度:{{String1[0].humidity}}

关闭input 自动完成（提醒历史纪录）功能

yun_hou的博客

06-16

2303

有些时候我们不需要input 输入框的自动补全功能（提醒历史纪录功能），html5新出了一个autocomplete属性，在html中加上该属性即可，例： <input type="text" autocomplete="off"> ...

input autocomplete

catherine的博客

12-26

1657

input 的属性autocomplete 默认为on 其含义代表是否让浏览器自动记录之前输入的值很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到可以在input中加入autocomplete="off" 来关闭记录系统需要保密的情况下可以使用此参数...

【antdv】表单文本框自动完成功能autocomplete

Owen的博客

05-06

977

项目中有一个需求，一个表单提报页面，希望文本框可以有自动补全功能，避免反复输入相同内容。

HTML ＜input＞标签的 autocomplete 属性

songjuntao8的专栏

09-07

6889

定义和用法 autocomplete 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。提示：在某些浏览器中，您可能需要手动

input文本输入框自动提示-autocomplete

一万年太久，只争朝夕

09-18

3614

首先来说，由于作者刚接触网站的开发，这篇文章写得有点乱，主要是记录给自己看的，怕以后忘记了，方便到时候查阅，若给您带来了不便，还请见谅。若有什么建议，请留言。非常感谢。 --------------------------------------------步入正题-------------------------------------------- 问题（目标）：目标样式如图1所示，当在文本框中输入字符时，实时进行提示相关信息，供用户参考和选择。 **分析：**那么这个功能该如何实现呢，jQuery提

antdv禁止表单自动填充

qq_26889291的博客

02-02

630

antdv禁止表单自动填充

a-input 封装select组件 vue

savivy的博客

04-07

1921

input 封装select组件 vue 需求：输入框，若输入框空白，聚焦展示所有下拉框，输入模糊匹配展示下拉框，输入完全匹配取消下拉框，若输入框存在值，聚焦不展示下拉框，值不完全匹配下拉框值时，展示下拉框；键盘上下可以选择下拉框值，enter可以确认选择 <a-input ref v-model.trim="userName" placeholder="用户名" autocomplete="off" @click.stop.prev

input 的 autocomplete

ffyhappy的专栏

06-24

502

input 的属性autocomplete 默认为on 其含义代表是否让浏览器自动记录之前输入的值很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到可以在input中加入autocomplete="off" 来关闭记录...

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

让学习成为一种习惯 ( 韩曙亮の技术博客 )

04-19

7107

一、HTML5 新增 input 表单属性 1、required 属性 2、placeholder 属性 3、autofocus 属性 4、autocomplete 属性 5、multiple 属性