带下拉框的input文本框

这几天做东西,要求在input中输入内容,但是需要有提醒功能,就是说如果数据库里有这条数据了,就会进行模糊查询显示出来,如果没有的话就获取当前输入的内容,图片说明:
1、当输入的内容在数据库中存在时:
进行模糊查询显示出来:
带下拉框的input文本框_第1张图片
2、当输入的内容在数据库中不存在时:
直接获取当前输入的值:
带下拉框的input文本框_第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中的内容。

你可能感兴趣的:(datalist,带下拉框的input,input模糊查询,Web)