最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Html5 list生成文本框下拉提示例子
时间：2022-06-25 18:23:33 编辑：袖梨 来源：一聚教程网
在之前，想要实现这样的功能，需要自己写下拉框的样式和一系列的 JS 代码，包括快捷键选择、选择后填充到文本框以及高亮筛选之类的。
基础属性
现在，只需要一个 Html5 属性 list 即可。list 属性需要应用到 input 框上，然后内容写一个自定义的 id
然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致。
在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。
下面是实例结构：
| 代码如下 | 复制代码 |
|
|
|
运行代码：
与服务器交换数据原理
既然都已经可以通过 Html5 填充下拉列表了，那就还需要与服务器交换数据，在输入关键词的时候即可 Ajax 请求服务器，然后将获得的数据填充到 datalist 标签里。
这里要注意的，首先就是请求速度，要想起到提示的作用必然请求时间不能太长，最好延时不超过一秒，才能真正有作用。既然对速度要求严格，必然不能执行整个网站程序，而是单独列一个 PHP 文件，通过 Get 属性请求 JSON 数据。
请求到数据之后就遍历 JSON，然后在 datalist 标签里填充 option 标签。
相关文章
- Yandex网页版访问入口 Yandex搜索引擎官网登录 10-26
- AI漫剧伪装直男1‑24集无雾版夸克网盘资源免费分享 10-26
- 韩漫在线免费漫画入口-最新韩漫免费阅读入口 10-26
- 海角社区最新登录入口-2026海角官网在线登录直达地址 10-26
- mcjs网页版即点即玩-mcjs极速秒玩入口 10-23
- 超星学习通网页版登录-超星学习通官网入口 10-23