带下拉框的input文本框

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cat_pp/article/details/53584360

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

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

<input id="wlmsinput" name="maktMaktx" list="wlmslist" value="${model.maktMaktx}"/>
                        <datalist id="wlmslist">
                            <c:forEach var="wl" items="${wuliaocp}">
                                <option value="${wl.maktx }">${wl.maktx }</option>
                            </c:forEach>
                        </datalist>

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

展开阅读全文

没有更多推荐了,返回首页