700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Web前端—既可以输入又可以选择的input框

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

时间:2024-07-28 10:12:23

相关推荐

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

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

废话就到此为止

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

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

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

具体代码如下

<input list="companys"/>

<datalist id="companys">

<option value="Apple">

<option value="Microsoft">

<option value="Github">

</datalist>

PS:这里的list一定要跟Datalist id 一致哦

这段代码实现了下列效果如图:

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

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

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

欢迎留言

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

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

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

具体代码给个Demo吧

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

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

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

哈哈哈

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。