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

最新推荐文章于 2025-11-16 12:59:17 发布

原创

最新推荐文章于 2025-11-16 12:59:17 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#输入框 #自动补全 #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

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

一万年太久，只争朝夕

09-18

3524

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

【前端】使用autocomplete实现输入框自动补全功能，同时获取输入框的值

qq_25285531的博客

03-07

1870

使用autocomplete实现输入框自动补全功能，同时支持动态添加/删除输入框，并获取输入框的值。

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

3 条评论

月亮也心酸 2020.07.16
没用啊？

せっしょうまる 2018.12.28
如果<input type="text" id="input" placeholder="有autocomplete的输入框"/> 在表单中好像会失效
- 十方魔回复せっしょうまる 2019.12.31
  不能直接套用，得看你具体的dom结构呀

jquery 实现autocomplete效果

12-05

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

input autocomplete

catherine的博客

12-26

1641

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

React Native Autocomplete Input 项目常见问题解决方案

最新发布

gitblog_00432的博客

11-16

853

React Native Autocomplete Input 是一个纯 JavaScript 编写的 React Native 自动完成输入组件，使用 TypeScript 编写。该项目旨在为 React Native 开发者提供一个简单易用的自动完成输入组件，开发者可以将其集成到自己的项目中，或者参考该项目构建自己的自动完成输入组件。 ## 新手使用注意事项及解决方案 ### 1. And

input 的 autocomplete

ffyhappy的专栏

06-24

465

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

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

Xuesong_2015的博客

12-15

702

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

精选资源

react-native-autocomplete-input：react-native的纯JavaScript自动完成输入

02-04

如何使用react-native-autocomplete-input 用RN> = 0.26.2测试。如果要使用RN <0.26，请尝试安装react-native-autocomplete-input <= 0.0.5。安装 $ npm install --save react-native-autocomplete-input ...

精选资源

react-autocomplete-input:React的自动完成输入字段

04-28

import TextInput from 'react-autocomplete-input' ; import 'react-autocomplete-input/dist/bundle.css' ; < TextInput xss=removed> 多个触发器和选项示例 import TextInput from 'react-autocomplete-input' ; ...

PyPI 官网下载 | django-autocomplete-light-1.1.4.tar.gz

01-10

**PyPI 官网下载 | django-autocomplete-light-1.1.4.tar.gz** `django-autocomplete-light` 是一个用于 Django 框架的强大的自动完成库，它为开发人员提供了一种简单而灵活的方式，来实现前端输入框的智能提示功能...

精选资源

django-admin-autocomplete-list-filter:适用于Django管理员的Ajax自动完成列表过滤器

03-09

django-admin-autocomplete-list-filter 适用于Django管理员的Ajax自动完成列表过滤器帮助程序。使用Django内置的自动填充小部件！无需额外的软件包或安装！安装及使用 $ pip install django-admin-autocomplete...

input自动填充-Autocomplete

mfkpie的专栏

09-10

2430

input自动填充-Autocomplete http://blog.youkuaiyun.com/linlinv3/article/details/38516661 标签： jquery.autocompletejquery.autocomplete乱自动填充提示值 2014-08-12 15:54 12509人阅读评论(1) 收藏举报

HTML ＜input＞标签的 autocomplete 属性

songjuntao8的专栏

09-07

6804

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

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

shilianweiyao的专栏

05-25

2144

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

输入框autocomplete功能实践

学徒ZSX

02-01

1186

autocomplete功能为：当你在输入框中输入数据的时候会动态的根据你的输入解雇返回数据库中匹配的数据。比较人性化，有各种实现方式。在项目中打算实现这一功能，大体分两种1、组件，因为使用的是jsf也可能是jsp，使用第三方的jar包提供的组件库，主流上就两种方式一个是richfaces的还有就是我新发现的但也很流行的primeface!!! 发现primeFace做的很炫，第一时间就

关于input自带的自动补全的功能——autocomplete

热门推荐

weixin_37575140的博客

01-10

1万+

纪念一下，这是我的第一篇在C站上的博客~撒花~ autocomplete 属性规定输入字段是否应该启用自动完成功能。默认情况下是启动的，也就是当你点击了input获取焦点之后浏览器会自动将以前的输入记录作为填入选项显示出来。这个是HTML5中的新属性，在不支持HTML5的浏览器下是没有用的。注释：autocomplete 属性适用于，以及下面的类型：text, search, ur

input 关闭输入的自动提示 autocomplate

学习笔记

01-06

2817

有些时候需要将 Input 的自动提示去掉，因为不去掉的话会很烦人，比如我有一个输入温度的输入框：每次点的时候都会出来这个提示框，很烦。

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

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

04-19

6937

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

网页input框自动填充问题

dopapapa的博客

04-13

1033

这样可以解决大部分场景下对于避免回填的需要。在 autocomplete 的文档中说明了 value 为 off 时，浏览器禁止给当前字段自动的输入或者选中一个值，但下方 Note 言明: 在大多数现代浏览器中，off 值不能阻止浏览器的。当 input type 为 password 但 autocomplete 为 new-password，即可解决浏览器自动填充问题，浏览器将当前输入框识别为新密码，便不会自动填充。这样设置可以保证用户在点击密码框之前，避免浏览器识别为登录表单、自动填充。

input属性autocomplete new-password

03-20

<input type="password" id="password" name="password" autocomplete="new-password"> <br> <button type="submit">Submit ``` This code snippet demonstrates its application in creating secure ...