Web前端—既可以输入又可以选择的input框

又是一周，以前总说码农码农现在才理解为什么这个职业刚开始就是搬砖的了

废话就到此为止

今天给大家说一下如何利用HTML5特性写一个既可以输入又可以选择的输入框

其实在HTML5中，有这样一个属性的Input框叫做 Datalist

顾名思义就是利用已有的Data为用户提供选择项

具体代码如下

PS:这里的list一定要跟Datalist id 一致哦
这段代码实现了下列效果如图：

还可以实现自动补全功能哦.

作者用这种方法替代了JQuery的Autocomplete功能但是不建议这么做因为机制不同

php渲染页面需要很长时间对于大数据量的还是建议autocomplete哈，如果有更好的方法

欢迎留言

对于后端来说这里笔者以PHP 举例

只遍历数据逐一赋值给<option value>即可

但还是那句话：少量数据建议这么做

具体代码给个Demo吧

简单实用的小技巧分享给大家把

还是那句话希望能帮到大家

PS 本人就是一只菜鸡所以慢慢提升技术含量再给大家写深度好文吧

哈哈哈

Web前端—既可以输入又可以选择的input框相关推荐

【Web前端】JavaScript的三种弹出框：警告框、确认框、提示框
JavaScript有三种不同的弹出框:警告框.确认框.提示框 1.警告框:window.alert() 当需要确保用户收到某种信息时,可以使用警告框,用户必须点击警告框上的[确定]按钮,才能继续操作 ...
input框5连--输入框不可输入以0开头的数字但是可以输入带0的数字常用正则
第一弹:input框只能输入数字缺能输入e的原因.链接:input框1连–数字输入框能输入e的原因第二弹:input框限制用户输入长度,超出长度不可输入.链接:input框2连–限制用户输入长度第 ...
【web前端】可筛选[输入搜索]的select(重写)
[web前端]可筛选[输入搜索]的select(重写) --- filterSelect.js /** * 将Select转变为支持输入内容对Select的Option进行筛选的js * @aut ...
html输入转换半角,Web前端开发：聊聊input输入框全角和半角应用
最近在开发一个国际业务的开户注册项目的时候,遇到关于input输入的问题,涉及到全角和半角的问题,刚开始的时候只是按照国内正常的去判断的. 问题其他国家的user,输入有时候会用全角,会报错,因为接 ...
最低什么样的学历，才可以选择转行web前端？
先上2021年7月最新的深圳前端招聘截图,可以看到,几乎所有的招聘都是在大专以上,那结果自然不言而喻了.但是,我们大专以下的同学是否就在真的没有机会了?且看下文: 当下前端开发的学历要求基本都是大专及 ...
从零学web前端_从零到前端英雄（第2部分）
从零学web前端 This article is part two of the "From Zero to Front-end Hero" series. In part one ...
Web前端的状态管理
背景我相信很多朋友跟我一样,初次听到什么 Flux , Redux , Vuex , 状态管理的时候是一脸懵逼的.因为在外面之前前端大部分开发的时候,根本没有那么多的概念.自从ReactJS火 ...
web前端网页加载性能优化大全
web前端性能优化 - - 如何提高网页加载速度文章目录 web前端性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求浏览器 ...
java mysql物联网土壤智能监控web前端+java后台+数据接程序
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 java mysql物联网土壤智能监控web前端+java后台+数据接程序视频效 ...

Web前端—既可以输入又可以选择的input框

Web前端—既可以输入又可以选择的input框相关推荐

最新文章

热门文章