AJax实现的搜索提示

 

AJax实现的搜索提示

在google中进行搜索时,当在文本框中输入数据时,会马上在下面给出搜索提示: 下面是利用Ajax实现的类似功能: 开发工具: MyEclipse 服务器技术: JSP 数据库: SQL Server 2005 开发步骤: 1. 数据库 /************************************************************************************************ 数据库: SuggestDB,搜索提示 作 者: 孙丰伟 时 间: 2008年1月19日 ************************************************************************************************/ create database SuggestDB go use SuggestDB   go create table SUGGEST ( suggest_id int primary key identity, --ID,自动编号 title nvarchar(255) default null         --title, 被搜索的内容 ) go insert into suggest values('AJAX & JSP') insert into suggest values('AJAX & ASP.NET') insert into suggest values('AJAX & PHP') insert into suggest values('AJAX & Struts 2') insert into suggest values('Java & JSP') insert into suggest values('Java & JSF') insert into suggest values('Java & Struts 2') insert into suggest values('Java & Struts 1') insert into suggest values('SQLServer2005 & JSP') insert into suggest values('SQLServer2005 & ASP.NET') insert into suggest values('SQLServer2005 & PHP') insert into suggest values('SQLServer2005 & Struts 2') 2. 创建Web项目SuggestAjax,目录结构如下: 3. ConnectDB类源码: /****************************************************** * 名称: ConnectDB, 连接数据库 * 作者： 孙丰伟 * 时间： 2008年1月20日 * 主要方法: * getConnection : 获取数据库连接 * close : 关闭连接 ******************************************************/ package cn.sunfengwei.suggest.database; import java.sql.*; public class ConnectDB { private static Connection con = null; private static String url = "jdbc:sqlserver://localhost:1433;databaseName=suggestDB"; public static Connection getConnection() {    try {     Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");     con = DriverManager.getConnection(url, "xxxx", "xxxx");    } catch (ClassNotFoundException e) {     e.printStackTrace();    } catch (SQLException e) {     e.printStackTrace();    }    return con; } // end of getConnection public static void close() {    try {     if (!con.isClosed())      con.close();    } catch (SQLException e) {    } } // end of close } // end of ConnectDB 4. 创建数据访问对象SearchDAO.java /****************************************************** * 名称: SearchDAO 数据访问对象 * 作者： 孙丰伟 * 时间： 2008年1月20日 * 主要方法: * getSearch : 数据搜索 * close     : 关闭连接 ******************************************************/ package cn.sunfengwei.suggest.model; import java.util.*; import java.sql.*; import cn.sunfengwei.suggest.database.*; public class SearchDAO { private Connection con; private PreparedStatement pstmt; private ResultSet rs; public SearchDAO() { con=ConnectDB.getConnection(); } /************************************************* * @author 孙丰伟 * @param userName 要注册的新用户名 * @return String , 在数据中搜索到的相关数据,每项使用/n分隔 * 前置条件：数据连接 *************************************************/ public String getSearch(String search) { StringBuilder searches=new StringBuilder(); try {    pstmt=con.prepareStatement("select * from suggest where title like ? order by title");    pstmt.setString(1,search+"%" );    rs=pstmt.executeQuery();    while(rs.next())    {     searches.append(rs.getString("title")+"/n");    }    rs.close();    pstmt.close(); } catch (SQLException e) {    // TODO Auto-generated catch block    e.printStackTrace(); } return searches.toString(); } public void close() { ConnectDB.close(); } } 5. 创建控制器SearchServlet.java /****************************************************** * 名称:SearchServlet, 控制器，URL映射为search * 作者： 孙丰伟 * 时间： 2008年1月20日 * 主要方法: * doGet : 检查用户名是否存在 ******************************************************/ package cn.sunfengwei.suggest.controller; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.sunfengwei.suggest.model.*; public class SearchServlet extends HttpServlet { /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException {    String search=request.getParameter("search");    response.setContentType("text/html");    PrintWriter out = response.getWriter();    SearchDAO searchDAO=new SearchDAO();    out.print(searchDAO.getSearch(search));    searchDAO.close();    out.flush();    out.close(); } } 6. WEB项目配置文件 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet>     <description>user</description>     <display-name>user of ajax</display-name>     <servlet-name>SearchServlet</servlet-name>     <servlet-class>cn.sunfengwei.suggest.controller.SearchServlet</servlet-class> </servlet> <servlet-mapping>     <servlet-name>SearchServlet</servlet-name>     <url-pattern>/search</url-pattern> </servlet-mapping> </web-app> 7. 样式表文件css.css body{font:12px arial;} .suggest_link{ background-color=#FFFFFF; padding:2px 6px 2px 6px; } .suggest_link_over{ background-color:#E8F2FE; padding:2px 6px 2px 6px; } #search_suggest{ position:absolute; background-color:#FFFFFF; text-align:left; border:1px solid #000000; } 8. AJAX异步提交程序suggest.js //create XMLHttpRequest object function getXmlHttpRequestObject() {    var xmlhttp=false;    try{    xmlhttp= new ActiveXObject('Msxml2.XMLHTTP'); }catch(e){    try{     xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');    }catch(e){     try{      xmlhttp= new XMLHttpRequest();     }catch(e){}    } } return xmlhttp; } var searchXmlRequest=getXmlHttpRequestObject(); function searchSuggest() { var str = escape(document.getElementById('txtSearch').value); searchXmlRequest.open("get","search?search="+str,true); searchXmlRequest.onreadystatechange=handleSearchSuggest; searchXmlRequest.send(null); } // end function searchSuggest function handleSearchSuggest() { if(searchXmlRequest.readyState==4) { var divSearch=document.getElementById("search_suggest"); divSearch.innerHTML=""; var str=searchXmlRequest.responseText.split("/n"); for(i=0;i<str.length-1;i++) {    var suggest="<div οnmοuseοver='javascript:suggestOver(this);'";    suggest+=" οnmοuseοut='javascript:suggestOut(this);'";    suggest+=" οnclick='javascript:setSearch(this.innerHTML);'";    suggest+=" class='suggest_link'>"+str[i]+"</div>";    divSearch.innerHTML+=suggest; } //end of for }// end of if } //end function handleSearchSuggest function suggestOver(div_value) { div_value.className="suggest_link_over"; } function suggestOut(div_value) { div_value.className="suggest_link"; } function setSearch(value) {    document.getElementById("txtSearch").value=value;    document.getElementById("search_suggest").innerHTML=""; } 9. 程序主页index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>    <title>搜索引擎</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <link rel="stylesheet" href="css/css.css" type="text/css"></link>    <script type="text/javascript" src="js/suggest.js"></script> </head> <body>     <h2>基于AJAX的搜索提示</h2>      <hr>      <div style="width:500px;">      <form id="form1" action="">      <input type="text" id="txtSearch" name="txtSearch" οnkeyup="searchSuggest();" autocomplete="off"/>      <input type="submit" id="btnSubmit" name="btnSubmit" value='搜索'/>      <div id="search_suggest"></div>      </form>      </div> </body> </html> 10. 运行结果