仿google搜索效果
?
实现过程
使用jquery实现这个功能.
首先倒入一系列jar包,还有jquery.js的文件
后台数据简单模拟了一部分,这个功能在使用了jquery后很简单了,简单的几个页面,
一个html页面在里面一定要引入两个文件一个是Jquery-1.4.4.js,还有一个自己的js页面.
页面代码如下:
<!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>google</title>
<script src="jquery/JQuery-1.4.4.js" type="text/javascript"? ></script>
<script type="text/javascript" src="google.js"></script>
</head>
<body>
<input type="text" id="k"
style="width: 50%; height: 30px; border-collapse: collapse;"
onkeyup="k_keyup(event)" onmousemove="onmous()" onmouseout="out_mous()" />
<div id="st"
style="margin-top: 1px; width: 50%; height: 150px; display: none">
<table id="stTab" style="width: 100%; border-collapse: collapse;"
border="1">
</table>
</div>
</body>
</html>
自己的js代码如下:
function k_keyup(event) {
var target = event.target || event.srcElement;
var v = target.value;
var stTab = document.getElementById("stTab");
var st = document.getElementById("st");
if (!v) {
stTab.innerHTML = "";
st.style.display = "none";
return;
}
console.debug(v);
console.debug($);
$.post("GoogleServlet", {k : v}, function(data, status, ajax) {
stTab.innerHTML = "";
if (data.length) {
for ( var i = 0; i < data.length; i++) {
var row = stTab.insertRow(i);
var cell = row.insertCell(0);
cell.innerHTML = data[i];
}
st.style.display = "";
} else {
st.style.display = "none";
}
});
}
这个代码的核心就是$.post("GoogleServlet", {k : v}, function(data, status, ajax)就这个方法,第一个参数书要访问的servlet的类,第二个参数是你要穿过去的值,第四个是相当于执行方法data是返回的数据,status是状态码,ajax就是个对象,
Servlet代码如下:
package com.ttw.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONSerializer;
public class GoogleServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.service(req, resp);
}
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/json");
String k = request.getParameter("k");
String[] str = new String[] { k + "经济", k + "呵呵", k + "嘿嘿", k + "哟哟" };
response.getWriter().print(JSONSerializer.toJSON(str));
}
}
这个里面返回的是一个json对象,这样法方便javascript解析. String[] str = new String[] { k + "经济", k + "呵呵", k + "嘿嘿", k + "哟哟" };这是一段模拟的数据.这里的真实数据应该来自数据库response.getWriter().print(JSONSerializer.toJSON(str));返回的是一个JSON对象,如果使用的JSON? response.setContentType("text/json");这是必须的写的!
完成了一个简单的搜索功能了!
?
