input输入框中嵌入下拉选项

最新推荐文章于 2024-09-07 09:16:11 发布

原创最新推荐文章于 2024-09-07 09:16:11 发布 · 5.1k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #数据库 #database

收录于

这篇博客探讨了前端HTML代码中使用`datalist`元素创建课程搜索框，并展示了后端如何通过JSP标签动态填充选项，实现数据的实时检索和显示。这种方法结合了前端用户体验与后端数据处理能力，提高了应用的交互性和实用性。

一、前端代码

<div class="form-group" style="width: 50px;height: 30px;" >
					<input type="text" id="coursName" list="cours" class="form-control" placeholder="课程搜索" autocomplete="off">
					<datalist id="cours">
						<option>计算机组成原理</option>
						<option>人工智能</option>
						<option>计算机图形学</option>
						<option>图像工程</option>
					</datalist>
				</div>

在这里插入图片描述

后端动态显示：

<input id="coursName" name="data" list="cours" value="搜索"/>
          <datalist id="cours">
           	<c:forEach var="cours" items="${datalist}">
          	 <option value="${cours.coursname}">${cours.coursname}</option>
          	 </c:forEach>
          </datalist>