使用Ajax模仿百度搜索框的自动提示功能实例（百度搜索的html代码）学到了吗

文章摘要

这篇文章介绍了如何使用Java语言和HTML技术实现一个简单的网页功能。具体来说，文章内容如下： 1. **网页结构**：文章展示了包含文本输入框和下拉提示框的HTML页面。文本输入框用于接收用户输入，下拉提示框用于显示从服务器端加载返回的数据。 2. **数据加载功能**：通过`XMLHttpRequest`对象，网页向后端发送用户输入的关键词（如“test”），后端返回数据，这些数据被split成多个项目，并显示在下拉提示框中。 3. **用户交互**：当用户点击下拉提示框中的项目时，点击后的项目内容会显示到文本输入框中，并隐藏下拉提示框。此外，页面还有一些颜色变化的事件监听，点击下拉提示框项时，该项会变为粉红色，点击后恢复原色。 4. **技术实现**：文章还提到了前端和后端之间的通信方式，使用的是GET方法，并在URL参数中添加了关键词。前端代码还实现了对数据的处理和显示功能。总结而言，这篇文章展示了如何使用Java和HTML构建一个简单的基于关键词搜索的网页功能。

<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Test Baidu</title>
</head>
<body>
<!–
文本输入框
–>
<div id=”serach”>
<input type=”text” name=”text” id=”text” />
<input type=”submit” value=”搜索” />
</div>

<!–
提示下拉框
–>
<div id=”tips” style=”display: none;
width: 171px; border: 1px solid pink”;>
</div>

</body>
<script>
window.onload=function(){
//获取文本输入框
var textElment=document.getElementById(“text”);
//获取下提示框
var div=document.getElementById(“tips”);
textElment.onkeyup=function(){
//获取用户输入的值
var text=textElment.value;
//如果文本框中没有值，则下拉框被隐藏，不显示
if(text==””){
div.style.display=”none”;
return;
}
//获取XMLHttpRequest对象
var xhr=new XMLHttpRequest();
//编写回调函数
xhr.onreadystatechange=function(){
//判断回调的条件是否准备齐全
if(xhr.readyState==4){
if(xhr.status==200){
//取的服务器端传回的数据
var str=xhr.responseText;

//判断传回的数据是否为空,若是则直接返回，不显示
if(str==””){
return;
}
//我们将会在服务器端把数据用 , 隔开，当然这里也可以使用json
var result=str.split(“,”);
var childs=””;
//遍历结果集，将结果集中的每一条数据用一个div显示，把所有的div放入到childs中
for(var i=0; i<result.length;i++){
childs +=”<div onclick=’Write(this)’ onmouseout=’recoverColorwhenMouseout(this)’ onmouseover=’changeColorwhenMouseover(this)’>”+result[i]+”</div>”;
}
//把childs 这div集合放入到下拉提示框的父div中，上面我们以获取了
div.innerHTML=childs;
div.style.display=”block”;

}
}
}

//创建与服务器的连接
xhr.open(“GET”,”${pageContext.request.contextPath}/test?text=”+text);

//发送
xhr.send();
}
}
//鼠标悬停时改变div的颜色
function changeColorwhenMouseover(div){
div.style.backgroundColor=”pink”;
}
//鼠标移出时回复div颜色
function recoverColorwhenMouseout(div){
div.style.backgroundColor=””;
}
//当鼠标带点击div时，将div的值赋给输入文本框
function Write(div){
//将div中的值赋给文本框
document.getElementById(“text”).value=div.innerHTML;

//让下拉提示框消失

div.parentNode.style.display=”none”;
}
</script>
</html>