类似google搜索例子

跪求类似google搜索例子，输入关键字在文本框下div显示出从数据库查询出来的内容。可用方向键选取内容如：下拉框一样等等就类似google的样式功能等。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

恩是的！不过我需要一个完整的例子或者小项目。各位如有此例请发到[email protected] 谢谢~~
采用ajax实现,下面给出源码！
-------web前台界面
<%@ 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>Insert title here</title>
<script src="js/ajax.js"></script>
<script src="js/util.js"></script>
<script type="text/javascript">
Event.onDOMReady(search);
function search(){
var toFindInput = $("toFind");
Event.addListener(toFindInput,"keyup", toSearch);
var close = $("close");
Event.addListener(close, "mousedown", closeDiv);
}
function closeDiv(){
var all = $("all");
all.style.display = "none";
}
function toSearch(){
var xhr = createXMLHttpRequest();
var callback = function(){
if(xhr.readyState == 4){
var result = xhr.responseText;
if(result != ""){
var all = $("all");
all.style.display = "block";
$("result").innerHTML = result;
}else{
var all = $("all");
all.style.display = "none";
}
}
}
var toFindText = "name="+encodeURIComponent($("toFind").value);
xhr.onreadystatechange = callback;
xhr.open("post","find.do",true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.send(toFindText);
}
</script>
</head>
<body>
<input type="text" id="toFind" size="50" /> <input type="submit" value="搜索" /><br />
<div  style="width: 373px;border:1px solid #101010;display:none; " id="all">
<div id="result">
</div>
<div id="close" style="width:25px;height: 13px;font-size: 12px;color: blue;margin-left: 330px;text-decoration:underline;margin-bottom: 3px;cursor:pointer;
">
关闭
</div>
</div>
</body>
</html>
-----------------------DAO层代码
package com.oyp.dao;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;import com.oyp.dao.db.DB;
import com.oyp.entity.School;public class SchoolDAO {

public List<School> findByNameLike(String name){

String sql = "select * from school where name like '%"+name+"%'";
//System.out.println(sql);
List<School> schools = new ArrayList<School>();
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = DB.getConn();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()){
School s = new School();
s.setId(rs.getInt("id"));
s.setName(rs.getString("name"));
schools.add(s);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
DB.close(rs);
DB.close(pstmt);
DB.close(conn);
}
return schools;
}

public School findByName(String name){
String sql = "select * from school where name=?";
System.out.println(sql);
School school = null;
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = DB.getConn();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, name);
rs = pstmt.executeQuery();
if(rs.next()){
school = new School();
school.setId(rs.getInt("id"));
school.setName(rs.getString("name"));
}
} catch (Exception e) {
e.printStackTrace();
}finally{
DB.close(rs);
DB.close(pstmt);
DB.close(conn);
}
return school;
}

public static void main(String[] args) {
List<School> s = new SchoolDAO().findByNameLike("安");
for(int i=0;i<s.size();i++){
System.out.println(s.get(i).getName());
}
}

}
---------------BO层
package com.oyp.bo;import java.util.List;import com.oyp.dao.SchoolDAO;
import com.oyp.entity.School;public class SchoolBO {
SchoolDAO schoolDao = new SchoolDAO();

public List<School> findByNameLike(String name){
return schoolDao.findByNameLike(name);
}

public School findByName(String name){
return schoolDao.findByName(name);
}
}
-----实体类
package com.oyp.entity;public class School {

private int id;

private String name; public int getId() {
return id;
} public void setId(int id) {
this.id = id;
} public String getName() {
return name;
} public void setName(String name) {
this.name = name;
}}
------servlet
package com.oyp.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.oyp.bo.SchoolBO;
import com.oyp.entity.*;
public class FindServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name").trim();
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
if(name.length()==0){
out.print("");
return;
}
List<School> list = new SchoolBO().findByNameLike(name);
StringBuffer result = new StringBuffer();
for(int i=0;i<list.size();i++){
result.append("<div>").append(list.get(i).getName()).append("</div>");
}
out.print(result.toString());
}}
-----------------------------------这是一个查询学校的列子,lz只要搭建个数据库就ok了！
实现过程很简单：
ajax请求servlet，在去数据查寻就好了！界面响应个键盘事件！！
struts2也有个类似的标签，jquey也有这个，搜索一下
需要JQuery的js 包 var nowXT = -1;//当前选中的节点
var nowXTObj; //当前选中的DIV
function suggestOnLoad() {
$("#auto").hide(); //隐藏 DIV
var inputText = $("#inputText").val();
$("#inputText").keyup(function (event) {
//发送请求
var myevent = event || window.event;
var eventCode = myevent.keyCode;

if ($("#inputText").val() != "") {
if (eventCode == 38 || eventCode == 40 || eventCode == 13) {
if (eventCode == 38) {
//往上
if (nowXT > 0) {
if (nowXT <= $("#auto").children("div").length) {
var autochildens = $("#auto").children("div");
var divChild1 = autochildens[nowXT];
var divChild2 = autochildens[nowXT - 1];
$(divChild1).trigger("mouseout");
$(divChild2).trigger("mouseover");
nowXTObj = $(divChild2);
nowXT = nowXT - 1;
}
}
} else {
if (eventCode == 40) {
//往下
if (nowXT >= -1 && nowXT < ($("#auto").children("div").length - 1)) {
var autochildens = $("#auto").children("div");
var divChild1 = autochildens[nowXT];
var divChild2 = autochildens[nowXT + 1];
$(divChild1).trigger("mouseout");
$(divChild2).trigger("mouseover");
nowXTObj = $(divChild2);
nowXT = nowXT + 1;
}
} else {
if (eventCode == 13) {
//Enter按键处理
if (nowXTObj != null) {
$("#inputText").val(nowXTObj.text());
$("#auto").hide("slow");
}
}
}
}
} else {
var timeOutId = setTimeout(function(){
$.get(convert("../servlet/SuggestServlet?inputText=" + encodeURI(inputText)), null, callback, "xml");
} , 500) ;

}
}
});
$("#button").click(function () {
alert("\u641c\u7d22\u7684\u5185\u5bb9\u4e3a: " + $("#inputText").val());
});
}
function callback(data) {
//初始化
nowXT = -1;
nowXTObj = null; //清空全部节点
$("#auto").empty();

//解析XML
var childNodes = $(data).find("word");

//迭代
childNodes.each(function () {
var word = $(this);
var x = $("<div>");
x.mouseover(function () {
var xT = $(this);
xT.css("border", "thin solid #3366CC");
xT.css("color", "red");
});
x.mouseout(function () {
var xT = $(this);
xT.css("border", "0px none #F0F0F0");
xT.css("color", "#000000");
});
x.click(function () {
var xT = $(this);
$("#inputText").val(xT.text());
$("#auto").hide("slow");
});
x.html(word.text());
$("#auto").append(x);
});

$("#auto").show("slow");
}//转换URL 骗过浏览器避免缓存
function convert(url) {
var url2 = url;
var timestamp = (new Date()).valueOf();
if (url.indexOf("?") >= 0) {
url2 = url2 + "&t=" + timestamp;
} else {
url2 = url2 + "?t=" + timestamp;
}
return url2;
}
package com.cs.servlet;import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class SuggestServlet extends HttpServlet {
private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("进入了");
request.getRequestDispatcher("../suggest/words.jsp").forward(request,
response);
}}
suggest.jsp<%@ 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>模仿GOOGLE SUGGEST 效果</title>
<script type="text/javascript" src="../js/suggest2.js"></script>
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
</head>
<body onload="suggestOnLoad()">
<input type="text" id="inputText">
<input type="button" value="Google一下" id="button">
<div id="auto">123</div>
</body>
</html>words.jsp
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<words>
<word>abc</word>
<word>yeah</word>
<word>anyone</word>
<word>anything</word>
<word>any</word>
<word>abandom</word>
<word>absolute</word>
<word>abs</word>
</words>