一个模仿Google Suggest的例子

zpl3001

浏览: 93399 次
性别:
来自: baga

最近访客更多访客>>

zyklon

1927105

Ranber

TiFa.L.Hart

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

问题解决

Google IE MySQL SQL SQL Server

先来看看效果吧

把两个文件直接copy过去，再自己为数据库添加数据，就可以运行。

/**
 * @author J's Fantasy
 */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<style type="text/css">
           body {
	          font:11px arial;
           }
           .suggest_link{  
              background-color:#FFFFCC;
	          padding:2px 6px 2px 6px;
           }
           .suggest_link_over{
	          cursor:default;
	          color:white;
	          background-color:#3366CC;
	          padding:2px 6px 2px 6px;
           }
           #suggest{
	          position:absolute;	          
	          text-align:left;
	          width:153px;
	          border:1px solid #000000;
           }
        </style>
		<script type="text/javascript">
		   
function getXmlHttpRequest(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHttp");
	}else{
		alert("The browser does not support XmlHttpRequest object");
		return;
	}
}

var xmlHttp=getXmlHttpRequest();

function search(){
	var str=document.getElementById("txt").value;
	//hide search
	if(str==""){
		document.getElementById('suggest').style.display='none';
		return;
	}else{
		//display the suggest
		document.getElementById('suggest').style.display='';
	}
	
	//release the pressure for server because of input in field at a high speed
	if(xmlHttp.readyState==4||xmlHttp.readyState==0){
		var url="g_suggest.jsp?para="+str;
		xmlHttp.open("GET",url,true);
	    xmlHttp.onreadystatechange=callback;
	    xmlHttp.send(null);
	}
}

function callback(){
	if(xmlHttp.readyState==4){
		if(xmlHttp.status==200){	
			var str=xmlHttp.responseText;
			var str1=str.split("\n");
			var result="";
			for(i=0;i<str1.length;i++){
			   result+='<div onmouseover="javascript:suggestOver(this);"';
			   result+='onmouseout="javascript:suggestOut(this);"';
			   result+='onclick="javascript:setSearch(this.innerHTML);"';
			   result+='class="suggest_link">'+str1[i]+'</div>';
			}
			document.getElementById("suggest").innerHTML=result;
		}
		else{
			alert("problem retrieving data:"+xmlHttp.statusText);
		}
	}
}

//mouse over function
function suggestOver(div_value){
	div_value.className='suggest_link_over';
}
//mouse out function
function suggestOut(div_value){
	div_value.className='suggest_link';
}
//click function
function setSearch(value){
	document.getElementById('txt').value=value;
	document.getElementById('suggest').innerHTML='';
	document.getElementById('suggest').style.display='none';
}

OnDocumentClick=function(event){
	if(!event){
		event=window.event;//ie
	}
	var e=event.target;//for firefox
	if(!e){
		e=event.srcElement;//for ie
	}
	while(e){
		//only if event source is on search_suggest or the search box
		//the popup div will not be hidden
		if(e==document.getElementById('suggest')||e==document.getElementById('txt')){
			return;
		}
		e=e.parentNode;
	}
	document.getElementById('suggest').style.display="none";
}

//for ie
try{
	document.onclick=OnDocumentClick;
}catch(e){
}
//for firfox(core Gecko)
try{
	document.addEventListener('click',OnDocumentClick,true);
}catch(e){
}
		   
		</script>
	<head>
	<body>
	    <center><b><h3>Google Suggest</h3><b></center><hr>
		<form id="gsuggest" action="http://www.google.com/search">
			<input id="txt" type="text" onkeyup="search()" onfocus=""/>
			<input id="go" type="submit" value="Google" alt="search"/><br>
			<div id="suggest" style="display:none"></div>
		</form>
	</body>	
</html>

<%@page contentType="text/html;charset=utf-8" pageEncoding="utf-8" import="java.sql.*"%>
<%
   out.clear();
   //keep the user's browser from caching the response
   response.addHeader("Expires","Mon,26 Jul 1997 07:00:00 GMT");
   response.addHeader("Last-Modified",new java.util.Date().toGMTString());
   response.addHeader("Cache-Control","no-cache,must-revalidate");
   response.addHeader("Pragma","no-cache");
   try{
      Class.forName("com.mysql.jdbc.Driver");
      Connection con=DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test","root","19850403");
      String str=request.getParameter("para");
      out.print(str+"---\n");
      if(str==null||str.equals("")){
         return;
      }
      String sql="select title from suggest where lcase(title) like lcase('"+str+"%') order by title";
      Statement stmt=con.createStatement();
      ResultSet rs=stmt.executeQuery(sql);
      while(rs.next()){
         out.print(rs.getString(1)+"\n");
      }
      rs.close();
      stmt.close();
      con.close();
   }catch(Exception e){
      e.printStackTrace();
   }
   out.flush();
   //out.close();
%>

分享到：