系统分析: 当我们上GOOGLE或百度等搜索引擎时候,每当我们在文本框输入内容时候,搜索引擎就会自动给我们提示信息。这极大的方面了我们的查询,并缩短了我们与所要得到的信息之间的距离。它们显示着一些我们可能想要搜索的内容。在本程序中,实现了该功能。
设计与实现:用户的每一次键盘输入都会触发事件。通过AJAX对象适时的发送请求给服务器端程序,系统就会自动生成提示页面。
核心代码: 1.接受用户搜索,并生成提示页面的HTML(googleSuggest.html)
<!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 type="text/javascript" src="prototype1.6.js"></script>
<script type="text/javascript">
function search(){
//keyword为空,将不发送Ajax请求
if($F("ctx")==""){
return; //如果不为空,发送Ajax请求检索
new Ajax.Request(
"servlet/SearchServlet", method:"post",
parameters:{keys:$F("ctx")},
onSuccess:function(req){
var rs = req.responseText.evalJSON();
clearTable();//清空列表
for(i=0;i<rs.length;i++){
var tr = $("td").insertRow($("td").rows.length); tr.onmouseover = function(){
this.style.backgroundColor="#FFFF66"; //鼠标移开恢复行背景色
tr.onmouseout = function(){
this.style.backgroundColor="#FFFFFF"; var nameTd = tr.insertCell(tr.cells.length);
nameTd.innerHTML = rs[i].keywork; nameTd.onclick = function(){
$("ctx").value = this.innerHTML;
clearTable();//清空列表 var countTd = tr.insertCell(tr.cells.length);
countTd.innerHTML = rs[i].count; } );
function clearTable(){
for(j=$("td").rows.length-1;j>=0;j--){
$("td").deleteRow(j); } </script>
</head>
<body>
<h1>
Google Suggest
</h1>
<form action="">
<input type="text" οnkeyup="search()" name="ctx" id="ctx">
<input type="button" value="查询">
<div id="d1">
<table id="td">
</table>
</div>
</form>
</body>
</html>2.接受请求,生成想用的Servlet(从数据库中动态获得数据,并反馈给HTML页面)
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import db.domain.SearchDAO; public class SearchServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/plain;charset=utf-8");
PrintWriter out = response.getWriter();
String keyword = request.getParameter("keys");
SearchDAO searchDao = new SearchDAO();
List list = searchDao.findLikeKeywork(keyword);
JSONArray json = JSONArray.fromObject(list);
out.println(json.toString());
System.out.println(json.toString());
out.flush();
out.close();
}3.数据库查询(SearchDAO.java)
public List findLikeProperty(String propertyName, Object value) {
log.debug("finding Searchxu instance like property: " + propertyName
+ ", value: " + value);
try {
String queryString = "from Searchxu as model where model."
+ propertyName + " like ?";
Query queryObject = getSession().createQuery(queryString);
queryObject.setParameter(0, value+"%");
return queryObject.list();
} catch (RuntimeException re) {
log.error("find like property name failed", re);
throw re; } public List findByName(Object name) {
return findByProperty(NAME, name }4.Search.java(实体类)和表t_search
private long id;
private String name;
private long count; drop table t_search;
create table t_search(
id bigint primary key auto_increment,
name varchar(100),
count bigint
设计与实现:用户的每一次键盘输入都会触发事件。通过AJAX对象适时的发送请求给服务器端程序,系统就会自动生成提示页面。
核心代码: 1.接受用户搜索,并生成提示页面的HTML(googleSuggest.html)
<!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 type="text/javascript" src="prototype1.6.js"></script>
<script type="text/javascript">
function search(){
//keyword为空,将不发送Ajax请求
if($F("ctx")==""){
return; //如果不为空,发送Ajax请求检索
new Ajax.Request(
"servlet/SearchServlet", method:"post",
parameters:{keys:$F("ctx")},
onSuccess:function(req){
var rs = req.responseText.evalJSON();
clearTable();//清空列表
for(i=0;i<rs.length;i++){
var tr = $("td").insertRow($("td").rows.length); tr.onmouseover = function(){
this.style.backgroundColor="#FFFF66"; //鼠标移开恢复行背景色
tr.onmouseout = function(){
this.style.backgroundColor="#FFFFFF"; var nameTd = tr.insertCell(tr.cells.length);
nameTd.innerHTML = rs[i].keywork; nameTd.onclick = function(){
$("ctx").value = this.innerHTML;
clearTable();//清空列表 var countTd = tr.insertCell(tr.cells.length);
countTd.innerHTML = rs[i].count; } );
function clearTable(){
for(j=$("td").rows.length-1;j>=0;j--){
$("td").deleteRow(j); } </script>
</head>
<body>
<h1>
Google Suggest
</h1>
<form action="">
<input type="text" οnkeyup="search()" name="ctx" id="ctx">
<input type="button" value="查询">
<div id="d1">
<table id="td">
</table>
</div>
</form>
</body>
</html>2.接受请求,生成想用的Servlet(从数据库中动态获得数据,并反馈给HTML页面)
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import db.domain.SearchDAO; public class SearchServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/plain;charset=utf-8");
PrintWriter out = response.getWriter();
String keyword = request.getParameter("keys");
SearchDAO searchDao = new SearchDAO();
List list = searchDao.findLikeKeywork(keyword);
JSONArray json = JSONArray.fromObject(list);
out.println(json.toString());
System.out.println(json.toString());
out.flush();
out.close();
}3.数据库查询(SearchDAO.java)
public List findLikeProperty(String propertyName, Object value) {
log.debug("finding Searchxu instance like property: " + propertyName
+ ", value: " + value);
try {
String queryString = "from Searchxu as model where model."
+ propertyName + " like ?";
Query queryObject = getSession().createQuery(queryString);
queryObject.setParameter(0, value+"%");
return queryObject.list();
} catch (RuntimeException re) {
log.error("find like property name failed", re);
throw re; } public List findByName(Object name) {
return findByProperty(NAME, name }4.Search.java(实体类)和表t_search
private long id;
private String name;
private long count; drop table t_search;
create table t_search(
id bigint primary key auto_increment,
name varchar(100),
count bigint