HTML：当你的文本输入框想输入时，能匹配对应的提示项，试试datalist

最新推荐文章于 2022-04-26 18:52:02 发布

MR_zbh

最新推荐文章于 2022-04-26 18:52:02 发布

阅读量650

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/MR_zbh/article/details/84965727

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

话不多说，直接贴代码

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
</input>

一起学习，一起进步

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MR_zbh

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html css 提示效果,纯css实现（无脚本）Html指令式tooltip文字提示效果

weixin_35976688的博客

06-09

544

分析执行流程鼠标移入节点检测是该节点是否存在开启实现 tooltip 实现的标识(类名，属性等) 检测主题、位置(类名，属性等) 生成 / 显示气泡借鉴他人让我们先来看看 element-ui的tooltip 样式很明显，气泡的位置是通过 javascript脚本加上去的不多逼逼，让我们来定几个期望不用javascript脚本，纯css 实现不用添加新元素**(用after、be...

HTML5 表单相关元素及属性

ChanCherry的博客

04-14

3107

极其简陋的网课笔记 ╮(￣▽￣)╭ copy一下好心安理得的偷懒（误） form表单常用属性 1. action属性在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。例如：<form action="form_action.asp"> 表示当提交表单时，表单数据会传送到名为 “form_action.asp...

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

js在编辑框input下根据输入内容显示匹配内容的下拉列表

01-27

实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。实现思路很简单：将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。在做的过程中遇到一个棘手的问题： input的onblur中隐藏下拉div div的onmouseup 将选择的li内容设置到input 鼠标从Input移到下拉div并点击其中一个li的过程： onmousemove => onblur => onmousedown => onmouseup 这问题两手的地方是是当点击li之前触发onblur，会隐藏下拉div, 则不再触发onmousedown 现在解决办法有两个：方案1：触发Onmousemove时获取当前鼠标位置在onblur事件时判断之前获取鼠标位置是否在下拉div的内部，如果在不隐藏下拉div,反之隐藏下拉div 方案2：在触发onmousemove时设置标志在触发onblur时判断标志，如果标志没有设置则隐藏下拉div 若标志已设置，为防止在下拉div外点击触发onblur,则需定时如300ms后对下拉div进行隐藏若点击的是下拉div则位触发onmouseup事件，则些事件中取消前面设置的定时器

HTML中input输入框动态模糊匹配

malz_zh的博客

11-15

3555

HTML中的input输入框根据后台返回的动态模糊匹配输入的内容，可以选择，也可以输入，此处是使用的是HTML5新增的标签datalist来实现，不需要插件，页面加载完时直接将后台查询到的所有值赋给datalist，还有一种是输入框中有改变时都调用接口向后台查询一次，返回给前台，这里先不做介绍。代码如下： test.html <!DOCTYPE html> <html ...

HTML5日期输入框(date)

热门推荐

z_xiaocun的博客

07-17

7万+

HTML5的出现大大提高了程序员的开发效率，date日期选择器只是其中之一，还有其他一些新的特性，我们一起学习。

输入框自动提示，字母小写转大写

06-01

在用户输入文本时，系统会根据已输入的部分文字，从预定义的数据源中匹配并显示可能的完成选项。这种功能在搜索框、表单填写等场景中非常常见。实现这一功能，可以利用JavaScript库如jQuery UI的Autocomplete组件，...

具有可选选项的输入文本框（ComboBox）

04-07

它结合了文本输入框和下拉选择列表的功能，允许用户既可以手动输入数据，也可以从预定义的选项中选择。这个主题主要围绕着如何在HTML、HTML5以及JavaScript中使用`ComboBox`来提升用户体验。 **HTML中的ComboBox** ...

4-表单及其属性

w_45678910的博客

12-18

848

认识表单表单的构成：提示信息，表单域，表单控件创建表单 <body> <form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form> </body> 表单属性属性说明 action action属性用于指定接收井处理表单数据的服务器程序的url地址 method method属性用于设置表单数据的提交方式，其取值为get或post

（二）HTML标签与元素

Shirley_Song_1的博客

04-26

836

HTML标签与元素

input datalist 文本框输入下拉匹配数据库中数据

world_the_begin的博客

09-10

2036

jsp页面： <table id="recommendTagTable" border="0"> <thead> <tr style="background:#EAF2FF;"> <th style=&quo

Jquery 文本框输入内容，自动匹配select 下拉框内容

网络剑客

08-22

9088

HTML 代码部分 <?php include('config.inc.php'); header('Content-Type: text/html; charset=utf-8'); ?> CPWEB $(document).ready(function(){ $("#username").change(function(){ var username=$(this).

HTML5中datalist标签的使用

星月昭铭的博客

10-01

6502

datalist是html5中出现的新标签，它需要配合input输入框来使用，它的作用就是定义了input可能要输入的值（可以被快捷选择），定义一个datalist的标签需要给他一个id，input就是根据id来与其绑定的，datalist中的option就是和列表一样，里面的每个数据都是可被用户所选择的 <datalist id="name"> <option value=...

利用HTML5 的datalist 元素实现输入提示

weixin_33850015的博客

01-08

408

你最喜欢的浏览器是： <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="C

textarea实现datalist效果_接口测试平台代码实现69: 多接口用例9

weixin_39655160的博客

12-01

290

本节课接着来开发该平台的内容。首先要先修复俩个缺陷，这要感谢群内小姐姐的慧眼(还没关注的小伙伴点点关注，加加群啊～)问题1: P_cases.html中的步骤step的名称存放的标签id重复了。这里我们要把底部的展示用span的id改成如下：问题2:点击步骤列表的关闭按钮，右侧步骤详情页也应该一起关闭才是：所以我们在关闭左侧div的函数中调用关闭右侧div的...

搜索框输入文字查询数据，需要匹配文字高亮显示

qian_li_hui的博客

03-31

1141

移动端开发经常遇到在搜索框输入文字查询数据，为提高易用性，需要匹配文字高亮显示，一、不区分大小写 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#248adf">' + keyword + '

easyui的combobox，自动搜索的下拉框

hgg923的专栏

11-30

1万+

如图，输入关键字，左匹配检索 HTML代码 js获取数据 $('#userId').combobox({ prompt:'输入首关键字自动检索', required:false, url:'${path }/portal/designer/tree', edit

HTML5新特性：datalist元素助力表单输入

在这个例子中，当用户在文本框`myCar`中输入时，浏览器会自动显示`cars`列表中的建议值，帮助用户快速选择或输入正确的值。 HTML5的其他新增功能还包括语义化标签（如、、、等）、离线存储、拖放功能、geolocation ...