jQuery仿百度提示

最新推荐文章于 2024-09-21 15:55:33 发布

Woo_home

最新推荐文章于 2024-09-21 15:55:33 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏： # Ajax and JQuery

本文链接：https://blog.youkuaiyun.com/Woo_home/article/details/89070262

Ajax and JQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的前端搜索框案例，当用户在输入框中输入文字时，能够实时显示反馈结果。该功能通过AJAX技术调用后端接口获取数据并更新页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<center>
<h2>Find一下</h2>
	<input type="text" name="words" id="words" style="width: 600px ; height: 50px  ;font-size: 20px;">
	<input type="button" value="Find"  style="height: 55px ; width: 100px ; ">
	
	<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>
</center>
</body>
</html>

js代码：（jQuery实现）

$(function(){
	$("#words").keyup(function() {
		//alert("键盘弹起了");
		//2。 获取输入框的值 
		//var word = $("#word").val();
		//this  对应就是执行这个方法的那个对象， $("#words")
		var words = $(this).val();
		//alert("弹弹弹弹");
		if(words == ""){
			$("#div01").hide();
		}else{
			//3. 请求数据。
			$.post("FindWordsServlet",{words:words} ,function(data , status){
				//alert(data);
				$("#div01").show();
				$("#div01").html(data);
			});
		}
		
	})
});

jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<table style="width: 100%">
	<c:forEach items="${list }" var="wordBean">
		<tr>
			<td>${wordBean.words}</td>
		</tr>
	</c:forEach>
</table>