Google Suggest的实现-CSDN博客

本文链接：https://blog.csdn.net/caoxu1987728/article/details/2987121

客服端代码：

suggest.html

 
 <html>
    <head>
        <style type="text/css" media="screen">
            body {
                font: 11px 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;          
            }       
        </style>
        <script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
    </head>
    <body>
        <h3>Hello ajax</h3>
        <div style="width: 500px;">
            <form id="frmSearch" action="">
                <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />
                <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />
                <div id="search_suggest">
                </div>
            </form>
        </div>
    </body>
</html>
 

ajax_search.js

 
 
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your Browser Sucks!/nIt's about time to upgrade don't you think?");
    }
}
function createAjaxObj(){
  var httprequest=false
  if (window.XMLHttpRequest)
  { 
    httprequest=new XMLHttpRequest()
    if (httprequest.overrideMimeType)
      httprequest.overrideMimeType('text/xml')
   }
   else if (window.ActiveXObject)
   { 
     try {
       httprequest=new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e){
       try{
          httprequest=new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch (e){}
     }
   }
   return httprequest
}
var searchReq = createAjaxObj();
function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('txtSearch').value);
        searchReq.open("GET", 'search?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest; 
        searchReq.send(null);
    }       
}
function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest')
        ss.innerHTML = '';
        var str = searchReq.responseText.split("/n");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string.  This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
            var suggest = '<div οnmοuseοver="javascript:suggestOver(this);" ';
            suggest += 'onmouseout="javascript:suggestOut(this);" ';
            suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
            suggest += 'class="suggest_link">' + str[i] + '</div>';
            ss.innerHTML += suggest;
        }
    }
}
//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('txtSearch').value = value;
    document.getElementById('search_suggest').innerHTML = '';
}
 

服务端代码：

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">
    
    <filter>
        <filter-name>response-filter</filter-name>
        <filter-class>book.filter.SetResponseFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>response-filter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
    <servlet>
    <servlet-name>search</servlet-name>
    <servlet-class>book.suggest.SearchSuggest</servlet-class>
   </servlet>
   <servlet-mapping>
     <servlet-name>search</servlet-name>
     <url-pattern>/search</url-pattern>
   </servlet-mapping>
</web-app>
 

SearchSuggest.java

 
 package book.suggest;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Vector;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SearchSuggest extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        
        request.setCharacterEncoding("GBK");
                
        String search = (String)request.getParameter("search");
        
        response.setContentType("text/html;charset=GBK");
        //search = new String(search.getBytes("ISO8859_1"));//出现空指针完全是这个原因 
        
        //((ServletResponse) request).setContentType("text/xml;charset=UTF-8"); 
        //response.setContentType("text/html;charset=GBK"); 
        response.setHeader("Cache-Control", "no-cache");
        //request.setCharacterEncoding("GBK"); 
        //response.setCharacterEncoding("GBK"); 
        
        String sql = "select distinct(title) from suggest where title like '%%"+search+"%%' order by title";
        //String sql = "select distinct(title) from suggest"; 
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs = null;
        Vector<String> vData = new Vector<String>();
        
        java.io.PrintWriter out = response.getWriter();
        try {
            
            Class.forName("com.mysql.jdbc.Driver");
        
            String url = "jdbc:mysql://localhost:3306/search";
            
            conn = DriverManager.getConnection(url, "root", "root");
            
            stmt = conn.createStatement();
            
            rs = stmt.executeQuery(sql);
            
            while (rs.next())
            {
                vData.add(rs.getString("TITLE"));
            }
            
            StringBuffer buf = new StringBuffer();
            for (int i=0;i<vData.size();i++)
            {
                String keyword = (String)vData.get(i);
                buf.append(keyword+"/n");
            }
            out.println(buf.toString());
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                
                if (stmt != null)
                    stmt.close();
                if (conn != null)
                    conn.close();
            } catch (SQLException sqle) {
            }
        }
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        doPost(request, response);
    }
}
 

SetResponseFilter.java

 
 package book.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
public class SetResponseFilter implements Filter {
    public void init(FilterConfig arg0) throws ServletException {
    }
    public void doFilter(ServletRequest req, ServletResponse rep,
            FilterChain chain) throws IOException, ServletException {
        
        chain.doFilter(req, rep);
        rep.setContentType("text/html;charset=UTF-8");
    }
    public void destroy() {
    }
}
 