语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>前端技术 >>HTML5 >>input带下拉选择框

input带下拉选择框

2018/5/4 14:36:57 0人评论 3734次 作者:admin

这几天做东西,要求在input中输入内容,但是需要有提醒功能,就是说如果数据库里有这条数据了,就会进行模糊查询显示出来,如果没有的话就获取当前输入的内容…

这几天做东西,要求在input中输入内容,但是需要有提醒功能,就是说如果数据库里有这条数据了,就会进行模糊查询显示出来,如果没有的话就获取当前输入的内容,图片说明: 
1、当输入的内容在数据库中存在时: 
进行模糊查询显示出来: 
 1.jpg

2、当输入的内容在数据库中不存在时,直接获取当前输入的值: 

2.jpg

好了,这就是功能说明,下面是实现的过程:

<input id="hdhcmsinput" name="hdhcmsa" list="hdhcms" value=""/>
<datalist id="hdhcms">
<option value="aaa">aaa</option>
<option value="abb">aaa</option>
<option value="bbb">bbb</option>
<option value="ddd">ddd</option>
<option value="ccc">ccc</option>
<option value="abc">aaa</option>
</datalist>

在input下使用datalist标签存储数据,通过id传递给input; 
我这里使用的是forEach将后台的数据存过来的,如果是固定的少量数据可以直接在datalist标签中添加n个option; 
在input中通过list属性获取datalist中的内容。


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-4 http://www.yuyanba.com
分享按钮