主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
HTML5原生输入框自动提示（下拉列表补全）功能
2021-09-21
网页编程网
网页编程网
添加list属性到input字段，然后创建一个datalist元素。与label的for属性类似，单击姓名标签，焦点自动移入输入框中。
<html> <head> <meta charset="utf-8"> </head> <body> <input list="pasta"> <datalist id="pasta"> <option>Bavette</option> <option>Cannelloni</option> <option>Fiorentine</option> <option>Gnocchi</option> <option>Pappardelle</option> <option>Penne lisce</option> <option>Pici</option> </datalist> <label for="username">姓名</label><input id="username" type="text" /> </body> </html>
动态生成选项。
<html> <head> <meta charset="utf-8"> </head> <body> <h3>js动态生成选项：</h3> <p>用于搜索自动补全。先删除自带的，再动态增加新选择。</p> <input list="p"> <datalist id="p"> <option>Bavette</option> </datalist> <script> var select = document.getElementById('p')// 根据ID获取select var options = select.options// 获取目前的所有节点 console.log(options) for (var i = options.length - 1; i >= 0; i--){ select.removeChild(options[i]) } select.appendChild(new Option('文本（我是动态增加的）', 'value值')) </script> </body> </html>
阅读原文
阅读
2845
123
显示电脑版